js的原型链

开篇

之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》,书中对原型对象和原型链的描述让我受益匪浅,下面仅用一个对比性的例子来说明。

我们经常会这么写

    function Person () {
        this.name = ‘John‘;
    }
    var person = new Person();
    Person.prototype.say = function() {
        console.log(‘Hello,‘ + this.name);
    };
    person.say();//Hello,John

上述代码非常简单,Person原型对象定义了公共的say方法,虽然此举在构造实例之后出现,但因为原型方法在调用之前已经声明,因此之后的每个实例将都拥有该方法。从这个简单的例子里,我们可以得出:
原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。所有就会有如下等式成立:

                            person.say == new Person().say

可能我们也会这么写

    function Person () {
        this.name = ‘John‘;
    }
    var person = new Person();
    Person.prototype = {
        say: function() {
            console.log(‘Hello,‘ + this.name);
        }
    };
    person.say();//person.say is not a function

很不幸,person.say方法没有找到,所以报错了。其实这样写的初衷是好的:因为如果想在原型对象上添加更多的属性和方法,我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前,这样就会造成一个问题:
var person = new Person()时,Person.prototype为:Person {}(当然了,内部还有constructor属性),即Person.prototype指向一个空的对象{}。而对于实例person而言,其内部有一个原型链指针proto,该指针指向了Person.prototype指向的对象,即{}。接下来重置了Person的原型对象,使其指向了另外一个对象,即
Object {say: function}
这时person.proto的指向还是没有变,它指向的{}对象里面是没有say方法的,因为报错。
从这个现象我们可以得出:
在js中,对象在调用一个方法时会首先在自身里寻找是否有该方法,若没有,则去原型链上去寻找,依次层层递进,这里的原型链就是实例对象的__proto__属性

若想让上述例子成功运行,最简单有效的方法就是交换构造对象和重置原型对象的顺序,即:

    function Person () {
        this.name = ‘John‘;
    }
    Person.prototype = {
        say: function() {
            console.log(‘Hello,‘ + this.name);
        }
    };
    var person = new Person();
    person.say();//person.say is not a function

一张图让你秒懂原型链

其实,只需要明白原型对象的结构即可:

    Function.prototype = {
        constructor : Function,
        __proto__ : parent prototype,
        some prototype properties: ...
    };

总结:函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

文/Pursue(简书作者)
原文链接:http://www.jianshu.com/p/aa1ebfdad661
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-10-27 17:35:02

js的原型链的相关文章

前端基本知识(二):JS的原型链的理解

之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这个问题,但是不知道使用的是什么一种方法,方法的原理是什么,现在觉得大学里学习的基本知识还是很重要的,一定有自己的理解才能走的更远. 无论以后自己的学习新的技术,但是万变不离其宗,基本扎实,学习效率高. 废话这么多,开始了今天理解的四部分部分. 一.JS的原型链理解方式 二.原型理解 三.规则 四.j

怎么理解js的原型链继承?

前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js的继承关系,需要借助于原型链.之前的文章,我有讲过原型和原型链的概念.在这,再重新回顾一下. js中万物皆对象,每个对象都有一个隐式原型 __proto__ ,指向创建它的构造函数的原型对象. 函数(构造函数)除了有一个隐式原型对象,还有一个属性prototype,它指向一个对象,这个对象就是原型对

js之原型链的理解

在js中,原型也是一个普通的对象,通过原型我们能够实现对象的属性继承. 首先,我们要明确引用类型有Array.Object.Function,这些引用类型都是能够自由的扩展属性. 1 var obj = {}; 2 obj.a = 10; 3 obj.b = 20; 4 5 obj; // Object {a: 10, b: 20} 我们上面说的这几个引用类型都有一个属性__proto__,这是一个普通的对象.而这个__proto__属性是指向它的构造函数的prototype属性.我们可以在代码

关于JS的原型链和作用域链

最近在看<Javascript高级程序设计第三版>,用了两周把前七章磕磕绊绊的读完了,也阅读了许多大牛们写的博客,对JS的理解有了很大的提高,不过要将这么多的知识全部融会贯通还有还需要多多练习,加深自己的理解,今天就将自己迷糊的几个地方列出来写写自己的理解,新手小白,如有错误欢迎大家指正(: 1.原型链和作用域链的概念模糊 这个问题可能有人觉得很无厘头,不过确实在我学习过程中突然出现而且让我产生很大的困扰,觉得是不是之前自己的理解就出现很大的问题.出现这个问题的原因是第七章函数表达式,原先在单

关于js中原型链的理解

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象指向函数的原型对象.在默认情况下,所有原型对象都会自动获得一个 constroctor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针.例如: function Person(){} 当我们创建这个Person函数(对象)的时候,该函数便有了一个prototype属性,它的

关于JS中原型链中的prototype与_proto_的个人理解与详细总结(代码示例+高清无码大图!——自备瓜子花生)

一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我)__被在此绕晕,图片就放在末尾了.) 以下三点需要谨记 1.每个对象都具有一个名为__proto__的属性: 2.每个构造函数(构造函数标准为大写开头,如Function(),Object()等等JS中自带的构造函数,以及自己创建的)都具有一个名为prototype的方法(注意:既然是方法,那么就

JS中原型链的理解

在谈原型链之前,我们首先要了解自定义函数与 Function 之间是什么关系,而构造函数.原型和实例之间又存在什么千丝万缕的关系呢?其实,所有的函数都是 Function 的实例.在构造函数上都有一个原型属性 prototype,该属性也是一个对象:那么在原型对象上有一个 constructor 属性,该属性指向的就是构造函数:而实例对象上有一个 _proto_  属性,该属性也指向原型对象,并且该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用. 1 // _proto_ 2 在函

深入javascript面向对象,js的原型链、继承

进阶面向对象----------------------– 在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象----------------------– 基本类型都有自己对应的包装对象 比如String Number Boolean 基本类型会找到对应的包装对象类型,然后包装对象把所有的属性方法给了 基本类型,然后包装对象消失 例如 var str = 'abc'; str.num = 10; //创建一个包装对象,给包装对象加num属性,然后立刻消失.

关于js的原型链,__proto__,prototype的理解

首先声明参考博文,感谢 http://blog.sina.com.cn/s/blog_6c62f4330102wq0u.html http://blog.csdn.net/leadn/article/details/51781539 等作者,还有一些其他链接这里就不粘贴了 js中关于prototype的文章不少,今天自己写一点自己的理解 不喜欢上来就粘概念,因为如果概念能够理解,也不需要写这篇文章了. 关于原型链里面的东西,主要就是prototype,__proto__这两个属性难以理解,今天我