原型链和访问对象原型的方法

小课堂【上海】

分享人:姚磊

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

JavaScript 中,万物皆对象。 JavaScript根据"原型链"(prototype chain)模式,来实现继承。

2.知识剖析

对象

JavaScript中,对象是有区别的,分为普通对象和函数对象


        function  f1(){};
        var f2 = function(){};
        var f3 = new Function('str','console.log(str)');

        var o3 = new f1();
        var o2 = new Object();
        var o1 = {};
  
        console.log(typeof  Object);  //function
        console.log(typeof  Function);  //function
        console.log(typeof o1);   //object
        console.log(typeof o2);   //object
        console.log(typeof o3);   //object

        console.log(typeof  f1);   //function
        console.log(typeof  f2);   //function
        console.log(typeof  f3);   //function
                        
                    

o1 o2 o3 为普通对象,f1 f2 f3 为函数对象。

对象继承

Brendan Eich参考C++和Java,做了简化设计,将new命令引入JavaScript中,new后面跟对象的构造函数,用来创建对象。这样做有个缺点:无法共享方法和属性.

比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

function DOG(name){
    this.name = name;
    this.species = '犬科';
}
                            
    然后,生成两个实例对象:
    var dogA = new DOG('大毛');
    var dogB = new DOG('二毛');
    
    这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。

    dogA.species = '猫科';
    console.log(dogB.species); // 显示"犬科",不受dogA的影响

每一个实例对象,都有自己的属性和方法的副本。
这不仅无法做到数据共享,也是极大的资源浪费。
                        
                

Brendan Eich决定为构造函数设置一个prototype属性。这个属性包含一个对象,所有实例对象需要共享的属性和方法,都放在这个对象里面;

那些不需要共享的属性和方法,就放在构造函数里面。

实例对象一旦创建,将自动引用prototype的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。



		function DOG(name){

		    this.name = name;
		}

		DOG.prototype.species= '犬科' ;
		            
		var dogA = new DOG('大毛');
        	var dogB = new DOG('二毛');

		console.log(dogA.species); // 犬科
		console.log(dogB.species); // 犬科

                        

species属性放在prototype对象里,是两个实例对象共享的。只要修改了prototype对象,就会同时影响到两个实例对象

DOG.prototype.species = '猫科';

console.log(dogA.species); // 猫科

console.log(dogB.species); // 猫科

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样.

原型prototype

在JavaScript 中,每当定义一个对象(函数)时候,对象中都会包含一些预定义的属性。其中函数对象的一个属性就是原型对象 prototype。普通对象没有prototype,但有_ proto _属性。


function  f1(){};

console.log(f1. prototype) //f1 {}

console.log(typeof  f1. prototype) //object

console.log(typeof  Function. prototype) // function

console.log(typeof  Object. prototype) // object

var o1 = {};
console.log(typeof o1.prototype) // undefined

                        

原型链

JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。


function  f1(){};
f1.__proto__ === Function.prototype  // true

var o1 = {};
o1.__proto__ === Object.prototype  //true

var Person = function(name){
    this.name = name
};

    Person.prototype.getName = function(){
        return this.name; 
    }

    var pkq = new Person('皮卡丘');
    pkq.getName(); //‘皮卡丘’

                        

以上面的例子为例:

pkq.__proto__ === Person.prototype //true
                                  
同样,Person.prototype对象也有__proto__属性,

它指向创建它的函数对象(Object)的prototype
                                  
Person.prototype.__proto__ === Object.prototype //true
                                  
Object.prototype对象也有__proto__属性,

但它比较特殊,为null
                                  
console.log(Object.prototype.__proto__) //null
                                  
通过__proto__串起来的直到Object.prototype.__proto__为null

的链叫做原型链。
                        

constructor属性

prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。

由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承。

constructor属性的作用,是分辨原型对象到底属于哪个构造函数。

总结

1.原型和原型链是JS实现继承的一种模型。

2.原型链的形成是真正是靠__proto__ 而非prototype。

3.常见问题

访问对象原型的方法有哪些?

4.解决方法

获取实例对象obj的原型对象,有三种方法
1. obj.__proto__
2. obj.constructor.prototype
3. Object.getPrototypeOf(obj)

5.编码实战

6.扩展思考

1.Object.__proto__ === Function.prototype // true 2.Function.__proto__ === Function.prototype // true 3.Function.prototype.__proto__ === Object.prototype //true

1.Object是函数对象,是通过new Function()创建,所以Object.__proto__指向Function.prototype。

2.Function 也是对象函数,也是通过new Function()创建,所以Function.__proto__指向Function.prototype。

3.Function.prototype是个函数对象,理论上其__proto__应该指向 Function.prototype,就是它自己,自己指向自己,没有意义。函数对象也是对象,给它设定根指向Object.prototype,Object.prototype.__proto__ === null,保证原型链能够正常结束。

7.参考文献

参考一: 阮一峰:Javascript继承机制的设计思想

参考二: JavaScript原型及原型链详解

8.更多讨论

鸣谢

感谢大家观看

BY :姚磊

Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status He