js原型和原型链

我们要理解js的原型，首先需要知道5条js原型规则：

1.js引用类型(function ,array ,object)都可以任意扩展自己的属性。

function fn(){

}
fn.age=10;
console.log(fn.age);//10

var arr=[1,2,3];
arr.name='keke';
console.log(arr);//[1,2,3,name:"keke"]

var obj={
    age:20;
}
obj.name='xixi';
console.log(obj);//{age:20,name:'xixi'}

 

 

2.所有的引用类型都有一个__proto__属性,这个属性值是一个普通对象。

var arr=[];
console.log(arr.__proto__);
var obj={};
console.log(obj.__proto__);
var fn=function(){};
console.log(fn.__proto__);

 

3.所有函数都有一个prototype属性，这个属性值也是一个普通对象

var fn=function(){};
console.log(fn.prototype);

4.一个对象的__proto__属性值指向这个对象的构造函数的prototype的属性值

function Animal(name,age){
    this.name=name;
    this.age=age;
}
var cat=new Animal('heihei',13);
console.log(cat.__proto__===Animal.prototype);//true

 

5.当查找一个对象的属性时，若在对象本身找不到，可以去它的__proto__(即它的构造函数的prototype)上去找。

function Animal(name,age){
    this.name=name;
    this.age=age;
}
Animal.prototype.sayName(){
    console.log(this.name);
}
var cat=new Animal('heihei',13);
console.log(cat.__proto__===Animal.prototype);//true
cat.sayName();//'heihei'

 

原型链

根据原型的第五条规则，当访问一个对象的属性时，会先在对象本身上去找，本身找不到后，会去它的__proto__上找，如果这里还是找不到，就会继续找__proto__.__proto__,因为这个__proto__的值也是一个对象，它也会有自己的__proto__属性，就这样....形成一条原型链。

function Animal(name,age){
    this.name=name;
    this.age=age;
}
Animal.prototype.sayName(){
    console.log(this.name);
}
var cat=new Animal('heihei',13);
console.log(cat.__proto__===Animal.prototype);//true
cat.sayName();//'heihei'
cat.toString();

 

 

 

使用for..in可以列举一个对象的所有属性

var item;
for(item in f){
    //在高级浏览器中for..in只能遍历对象自身的属性，但为了兼容性，需要写以下语句
    if(f.hasOwnProperty(item)){

    }
}