原型和原型链
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);
- 创建一个新对象
- this指向这个新对象
- 执行代码,即对this赋值
- 返回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>')