js原型对象和原型链理解_js原型对象和原型链资源-CSDN下载

5星 · 超过95%的资源 148 浏览量 2020-12-02 12:51:28 上传评论收藏 113KB PDF 举报

资源推荐

资源详情

资源评论

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

陈游泳

2023-06-10

者使用大量的代码示例，使概念更加形象。
VashtaNerada

2023-06-10

些细节处和实际应用情况也一并提到，解答了我很多困惑。
daidaiyijiu

2023-06-10

篇文章提供了关于js原型对象和原型链的最基本的知识点，对初学者非常友好。
阿玫小酱当当囧

2023-06-10

者的语言质朴，描绘风趣轻松，把各种概念叙述得细致又全面。
航知道

2023-06-10

于那些想要理解js原型对象与原型链的人来说，这篇文章是极佳的入门材料。

前往

页

weixin_38716590

粉丝: 4

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip