前端基础之原型和原型链

来源：思诚科技    更新时间：2018-3-26

1、原型和原型链 
1、1构造函数 
functionFoo(name,age){ 
this.name=name 
this.age=age 
this.cklass='class-1' 
//returnthis//默认有这行 
} 
varf=newFoo('zhangsan',20) 
varf1=newFoo('lisi',22) 
1、2构造函数-扩展 
functionFoo{...}其实是varFoo=newFunction(...) 
使用instanceof判断一个函数是否是一个变量的构造函数 
1、3原型规则和示例 
所有的引用类型（数组、对象、函数），都具有对象特性 
即可自由扩展属性（除了null以外） 
所有的引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性 
属性值是一个普通的对象 
所有的函数，都有一个prototype（显示原型）属性，属性值也是一个普通对象 
所有的引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性指向它的构造函数的prototype属性值 
varobj={};obj.a=100 
vararr=[];arr.a=100; 
functionfn(){} 
fn.a=100; 
console.log(obj.__proto__); 
console.log(arr.__proto__); 
console.log(fn.__proto__); 
console.log(fn.prototype) 
console.log(obj.__proto__===Object.prototype) 
当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么回去它的__proto__（即它的构造函数的prototype中寻找） 
//构造函数 
functionFoo(name,age){ 
this.name=name 
} 
Foo.prototype.alertName=function(){ 
alert(this.name) 
} 
//创建实例 
varf=newFoo('zhangsan') 
f.printName=function(){ 
console.log(this.name) 
} 
//测试 
f.printName() 
f.alertName() 
f.toString()//要去f.__proto__.__proto__中去找 
1、4图解原型链  

1、5试题 
如何准确判断一个变量是数组类型 
vararr=[] 
arrinstanceofArry//true 
typeofarr//object,typeof是无法判断是否是数组的 
写一个原型链继承的例子 
//动物 
functionAnimal(){ 
this.eat=function(){ 
console.log('animaleat') 
} 
} 
//狗 
functionDog(){ 
this.bark=function(){ 
console.log('dogbark') 
} 
} 
Dog.prototype=newAnimal() 
//哈士奇 
varhusky=newDog() 
封装DOM查询例子 
funcctionElem(id){ 
this.elem=document.getElementById(id) 
} 
Elem.prototype.html=function(val){ 
varelem=this.elem 
if(val){ 
elem.innerHTML=val 
returnthis//链式操作 
}else{ 
returnelem.innerHTML 
} 
} 
Elem.prototype.on=function(type,fn){ 
varelem=this.elem 
elem.addEventListener(type,fn) 
returnthis 
} 
vardiv1=newElem('detail-page') 
div1.html('<p>helloworld</p>').on('click',function(){ 
alert('clicked') 
}).html('<p>javascript</p>') 
描述new一个对象的过程 
见1.1构造函数例子 
创建一个对象 
this指向这个对象 
执行代码，对this赋值 
返回this 
zepto（或其他框架）源码中如何使用原型链

上一篇文章： CSS系列教程 - CSS Positioning(定位)

下一篇文章： 没有了