原型和原型链

原型和原型链

1、构造函数—首字母一定大写

function Foo(name,age){

this.name = name;

this.age = age;

this.sex = '女';

// return this;            //默认有返回行

}

//创建对象

var f = new Foo('zhangsan',20);

执行过程：

（1）开始执行，this变成空对象

（2）执行this.XX.......，为属性赋值

（4）默认返回this，赋值给对象f。f具备属性：f.name=’zhangsan’;f.age=..

2、构造函数扩展

• var a = {},其实是var a = new Object()的语法
• var a = [],其实是var a = new Array()的语法
• function Foo(){...}，其实是var Foo = new Function(){}的语法
• 使用instance of 判断一个函数是否是一个变量的构造函数。

3、原型规则和示例——5条原型规则

• 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除null外）。如：var obj = {};  obj.a = 100;  obj._proto_
• 所有的引用类型（数组、对象、函数），都有一个_proto_属性，属性值是一个普通的对象。 _proto_——隐式原型
• 所有的函数都有一个prototype属性，属性值也是一个普通的对象。Prototype——显示原型
• 所有的引用类型（数组、对象、函数），_proto_属性值指向它的构造函数的”prototype”属性值。                                                 如：var obj = {};      obj._proto_ === Object.prototype
• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_(即：它的构造函数的prototype)中寻找。

4、原型链

5、instance of ——用于判断引用类型属于哪个构造函数的方法

如：f instance of Foo的判断逻辑是：

f的_proto_一层一层往上，能否对应到Foo.prototype;

再试着判断 f instance of object

6、描述new 一个对象的过程

function Foo(name,age){

this.name = name;

this.age = age;

this.sex = '女'; 

}

var f = new Foo('zhangsan',20);

1. 创建一个新对象
2. this指向这个新对象
3. 执行代码，即对this赋值
4. 返回this

7、原型继承的例子

function Elem(id){

this.elem = document.getElementById(id)

}

 

Elem.prototype.html = function (val){

var elem = this.elem;

if(val){

elem.innerHTML = val;

return this;    //链式操作

}else{

return elem.innerHTML;

}

}

 

Elem.prototype.on = function(type,fn){

var elem = this.elem;

elem.addEventListener(type,fn)

return this;

}

 

var div1 = new Elem("div1")

div1.html('<p>Hello World</p>');

div1.on('click',function(){

alert('clicked');

})

 

//链式操作

div1.html('<p>...</p>').on('click',function(){}).html('<p>....</p>')