面向对象+闭包+三种对象的声明方式（字面式、new Object、构造函数、工厂模式、原型模式、混合模式）

面向对象：

对代码的一种抽象，对外统一提供调用接口的编程思想

对象的属性：事物自身拥有的东西

对象的方法：事物的功能

对象：事物的一个实例

对象的原型：.prototype -> 内存地址 -> 存储了一个对象

    function fn(){

        return 1;

    }

    alert(fn.prototype);//[object Object]

通过new Function创建的对象是函数对象，其他的都是普通对象

var obj=new Function(n1,n2,n3,...functionBody());

//构造函数对象  前面是一系列参数，后面是自定义函数体

//不过构造器构造的对象，效率比较低

//参数顺序不能改变，必须一一对应

var add=new Function("a","b","return a+b");

var sum=add(3,5);

alert(sum);//

闭包

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数）

全局变量在函数内部可以访问

var n=100;

function fn(){

    alert(n);//

}

fn();

函数内部的变量，在外部不能访问

function fn(){

    var n=100;

}

fn();

alert(n);//报错 n is not defined

有时需要在外部访问函数内部的变量

解决方法：在函数内部再定义一个函数，输出需要的变量，然后将该内部函数作为返回值

function fn(){

    var n=100;

    function fn2(){

        alert(++n);

    }

    return fn2;

}

fn()();//

闭包：函数b在函数a内嵌套，函数a需要返回函数b

用途：1、读取函数内部变量 2、让函数内部变量保留在内存中，不随着函数的执行结束而被销毁

function fn(){

    var n=100;

    nAdd=function(){

        n++;

    }

    function fn2(){

        alert(n);

    }

    return fn2;

}

var res=fn();//将fn()赋值给变量后，内部变量不会在每次执行时被初始化

res();//

nAdd();

res();//

闭包的优缺点：

优点-有利用封装，可以访问局部变量

缺点-内存占用，容易产生内存泄漏

闭包可以使用，但要谨慎使用

在html中创建任意几个li，利用闭包特性实现点击li弹出它的索引值

var lis=document.querySelectorAll("li");

for(var i=0;i<lis.length;i++){

    (function(i){

        lis[i].onclick=function(){

            alert(i);

        }

    })(i);

}

匿名函数自调用，传入了for循环里面的i值，保存每一次循环的i值

for循环会先执行完毕，然后形成多个作用域

每个i值会作为实参传入函数中，当点击li的时候，弹出的i值就是作用域中的i值

字面式声明对象-最基本的方式

//字面式

var person={

    name:"cyy",

    age:25,

    eat:function(food){

        alert("我在吃"+food);

    }

}

console.log(person.name);//cyy

person.eat("西瓜");//我在吃西瓜

console.log(person instanceof Object);//true

new Object() 构造函数

Object是所有对象的基类，所有javascript对象都是由object延伸的

//new Object()构造函数

var person=new Object();

person.name="cyy";

person.age=25;

person.infos=function(str){

    return this.name+" "+this.age+" "+str;//this指向当前对象

}

alert(person.infos("很可爱"));//cyy 25 很可爱

构造方法声明对象

使用new来实例化

函数内部只能用this来访问属性和方法

//构造方法声明对象

function Person(name,age){

    this.name=name;//this.name是属性 name是参数

    this.age=age;

    this.show=function(){

        alert(this.name+" "+this.age);//this指向当前对象，不同的实例对象是独立的

    }

}

var cyy=new Person("cyy",25);

cyy.show();//cyy 25

var cyy2=new Person("cyy2",18);

cyy2.show();//cyy2 18

工厂方式声明对象：按照某种模式，可以不断的创造对象

在一个函数内部使用 new Object() 创建一个对象，并且返回这个对象

//工厂模式

function person(name,age){

    var obj=new Object();

    obj.name=name;

    obj.age=age;

    obj.infos=function(){

        return this.name+" "+this.age+" 很可爱";//对象的方法中要调用属性，必须使用this

    }

    return obj;

}

var cyy=person("cyy",25);

alert(cyy.infos());//cyy 25 很可爱

var cyy2=person("cyy2",25);

alert(cyy2.infos());//cyy2 25 很可爱

// cyy和cyy2两者没有联系

构造方式和工厂模式的区别：

构造方式不会创建出一个对象，也不会返回这个对象，将属性赋值给this

原型模式声明对象

任何js方法或者函数，都自带prototype属性，并且以对象方式存在

函数本身声明为空内容，通过prototype声明属性和方法，最后new这个函数

//原型模式

function person(){

}

//alert(person.prototype);//[object Object]

person.prototype.name="cyy";

person.prototype.age=25;

person.prototype.infos=function(){

    return this.name+" "+this.age;

}

var p=new person();

alert(p.infos());//cyy 25

原型模式也可以以json数据的方式来定义属性和方法

//原型模式

function person(){

}

//json数据格式

person.prototype={

    name:"cyy",

    age:25,

    infos:function(){

        alert(this.name+" "+this.age);

    }

}

var p=new person();

p.infos();//cyy 25

混合模式：构造模式+原型模式

//混合模式：构造+原型

function person(name,age){

    this.name=name;

    this.age=age;

}

person.prototype={

    addr:"China",

    infos:function(){

        alert(this.name+" "+this.age+" "+this.addr);

    }

}

var p=new person("cyy",25);//构造函数部分需要传参，原型部分直接定义

p.infos();//cyy 25 China

巴特西

面向对象+闭包+三种对象的声明方式（字面式、new Object、构造函数、工厂模式、原型模式、混合模式）

最新文章

热门文章