javascript 原型链

1、什么是原型链机制 　　

 　　首先来看一段代码：

 1 var person = {name : "Peter"};
 2 
 3 //Peter
 4 console.log(person.name);
 5 
 6 //undefined
 7 console.log(person.age);
 8 
 9 Object.prototype.age = 100;
10 
11 //100
12 console.log(person.age);

 　  为何person.age 能够访问 Object.prototype.age 呢？

这里就要引出原型链了:

　　当须要获取一个对象的某个属性或方法时，首先在对象自身查找该属性，找不到的话，会沿着原型链向上查找，直到在某个原型中找到该属性，若是到达原型链顶端依然找不到，则返回undefined.

2、原型链的做用

1. 面向对象时，继承主要就依靠原型链来实现
2. 定义构造函数时，使用原型来防止方法的重复定义(静态方法)
3. ...发挥你的想象

继承实例:

 1 function Father(){ ...}
 2 
 3 function Son(){...}
 4 
 5 var father = new Father();
 6 
 7 //实现继承,全部的son继承自father对象
 8 Son.prototype = father;
 9 
10 var son = new Son();
11 
12 //true
13 son instanceof Father;

 

使用原型来防止方法重复定义:

 1 //使用这种方法来定义构造函数时，每次new Cat都从新建立了一个bite方法
 2 function Cat(){
 3        this.name = "咪咪";
 4        function bite(){...}
 5 }
 6 
 7 //这种方式，在new Dog时，全部实例都用的同一个bite方法
 8 function Dog(){
 9       this.name = "旺财";
10 }
11 
12 Dog.prototype.bite = function(){...}

 

 

3、理解原型链原理

想要理解javascript的原型链机制，首先要有这些概念:

• 除了5种基本类型(number, string, boolean, null, undefined)外,全部东西都是对象,function也不例外
• 每一个对象都有本身的构造函数
  • 　　用字面量定义的对象(var obj = {})的构造函数是Object()
  • 　　全部函数的构造函数都是Function()函数. (Function()也是一个函数,它的构造函数是本身)
  •       new xxx() 的 构造函数为 xxx()
• 标准中规定, 全部对象都有一个[[proto]]属性,它指向本对象的原型, 一般是不可访问的，但FF和chrome中提供__proto__属性来访问该值

ps:基本数据类型在执行方法时会被转换为对应的包装对象(Number, String, Boolean)

 

接下来，就是原型链的核心了,请注意，核心是[[proto]]：

1. 原型链是根据[[proto]]属性，来遍历全部原型
2. 每定义一个函数时，都会为该函数对象产生一个prototype属性(注意：与[[proto]]不一样,只有函数对象才有,笔者刚学习时老弄混),它的默认值是一个名字与函数名相同的对象 , 这个对象有个属性constructor,指向函数自身(func.prototype.constructor === func)
3. 全部普通对象(非函数对象)的[[proto]]指向它的构造函数的prototype属性
4. 全部函数对象(包括Function本身)的[[proto]]都指向Function.prototype属性
5. 对于prototype属性而言,由于它也是是一个对象,它的[[proto]]都指向Object.prototype属性
6. Object.prototype的[[proto]]的值为null, 它是原型链的顶端

你们结合文字再看网络上流传的图，进一步的理解原型链.