Javascript原型链

标签：

对于prototype属性的说明，引用文章：http://www.cnblogs.com/dolphinX/p/3286177.html

1.原型链是什么？

原型都有一个指向构造函数的指针

假如我们让SubClass原型对象等于另一个类型的实例new SuperClass()会怎么样？此时，SubClass原型对象包含一个指向SuperClass原型的指针，SuperClass原型中也包含一个指向SuperClass构造函数的指针。这样层层递进下去，就形成了一个原型链。

2.为什么要定义原型链的概念？

许多OO语言都支持两种继承方式：接口继承和实现继承。

1.接口继承只继承方法签名

2.实现继承则继承实际的方法

由于ECMAScript中函数没有签名，故无法实现接口继承。ECMAScript只支持实现继承，并将原型链作为实现该继承的主要方法。

3.原型链实现继承的实例

例1.定义类Student，并使其继承类Person

function Student(name){
    this.name = name;
};
Student.prototype.sayName = function(){
    console.log("Student: "+this.name);
}

function Person(name){
    this.name = name;
};
Person.prototype.sayName = function(){
    console.log(this.name);
}
Person.prototype.sayType = function(){
    console.log("I‘m Person!");
}
//理清概念：Student.prototype为Student类对象(也被称为Student实例的原型)，Student为Student类的构造器(即Student.prototype.constructor = Student)
//核心：让Student继承Person即实现：Student.prototype._proto_ = Person.prototype 即可

//方式1.(推荐)
//Student.prototype.__proto__ = Person.prototype;
//方式2.(有弊端)    创建一个对象，并使得该对象的原型为Person.prototype
//Student.prototype = Object.create(Person.prototype)
//Student.prototype.constructor = Student;//由于重新绑定原型对象，所以必须重新给新绑定的对象赋值构造器
//方式3.(有弊端)    Student.prototype绑定Person类的实例来实现,Student.prototype._proto_ = Person.prototype
Student.prototype = new Person();
Student.prototype.constructor = Student;//理由同上

var Zhe = new Student("Zhe");
console.log(Zhe instanceof  Student)//true
console.log(Zhe instanceof Person);//判断Zhe的原型链上是否有Person.prototype    result:true
Zhe.sayName();//方式1. Student:Zhe  方式2、3. Zhe---------->方式2.3弊端的体现
Zhe.sayType();//I‘m Person

解释弊端：

Student.prototype也是一个对象,由于JavaScript中对象为引用类型，所以Student.prototype只为原型对象的引用。方式1.不改变引用对象，在该引用对象上找到sayName方法。而对于方式2、3改变了引用对象(即Student.prototype绑定了新的对象)，由于新对象没有sayName方法，继续原型链上找，直到在Person.prototype上找到了sayName方法。

例2.

function Student(){}
function Person(){}

var Zhe = new Student();//等同于var Zhe = Object.create(Student.prototype)
Student.prototype = Object.create(Person.prototype)//使得Student继承Person
Student.prototype.constructor = Student;
console.log(Zhe instanceof Person);//false
var ZheG = new Student();
console.log(ZheG instanceof Person);//true

例3.

function Student(){}
function Person(){}

var Zhe = new Student();//等同于var Zhe = Object.create(Student.prototype)
Zhe.__proto__ = Object.create(Person.prototype)//使得Student继承Person
Zhe.__proto__.constructor = Student;
console.log(Zhe instanceof Person);//true
var ZheG = new Student();
console.log(ZheG instanceof Person);//false

4.为何任何对象都有toString方法？原型链的探究？

例4.

function Student(){};
Student.prototype.learn = function(){
    console.log("learn");
}
Student.prototype.hi = function(){
    console.log("Student say Hi");
}
function Person(){};
Person.prototype.LEGS_NUM = 2;
Person.prototype.ARMS_NUM = 2;
Person.prototype.walk = function(){
    console.log("walk");
};
Person.prototype.hi = function(){
    console.log("Person say Hi");
}
Student.prototype.__proto__ = Person.prototype;//Student继承Person

var bosn = new Student();
bosn.hi();//Student say Hi
bosn.learn();//learn
bosn.walk();//walk
console.log(bosn.toString());//[object Object]

//Q:bosn本身没有toString方法，并且其原型链上的Student.prototype、Person.prototype也都没有toString方法，那么toString哪里来的呢？
//A:猜测：由于Object实例都有toString方法，可知toString位于Object.prototype上。那么说明bosn的原型链上有Object.prototype,验证：
console.log(Person.prototype.__proto__ == Object.prototype);//true
console.log(Object.prototype.__proto__ == null );//true

//可知bosn对象完整的原型链为：bosn---->Student.prototype---->Person.prototype---->Object.prototype---->null
console.log(Zhe.__proto__ == Student.prototype);//true
console.log(Student.prototype.__proto__ == Person.prototype);//true
console.log(Person.prototype.__proto__ == Object.prototype);//true
console.log(Object.prototype.__proto__ == null)//true


// Student.prototype---->Person.prototype    
// 语义：Student.prototype对象指向Person.prototype对象
// 实现：Student.prototype._proto_ = Person.prototype
// 意义：Student 继承 Person/Student.prototype 为 Person的实例

bosn对象的原型链图：

例5.

function Student(){}
//Student为Funciton的实例:Student---->Function.prototype故：
consolt.log(Student instanceof Function);//true
console.log(Student._proto_ == Function.prototype)//false?
var Zhe = new Student();

//Q:Zhe的原型链上是否有Funciton.prototype?
console.log(Zhe instanceof Function);//false
console.log(Zhe instanceof Object);//true
//A:Zhe---->Student.prototype---->Object.prototype---->null.Zhe对象上的原型链并没有Function.prototype!

Javascript原型链

标签：

原文地址：http://www.cnblogs.com/ZHeGeS/p/4870332.html