【前端工程师手册】JavaScript之原型

Darkgel 发布于2019-08-22 17:29 / 2331人阅读

摘要：又是一个比较重要的知识点原型。且和指向了同一个对象。可以是使用做什么创建对象的数据共享把一些实例共享的属性和方法放在原型上，节约空间。基于原型链的委托继承这个原型继承的关系可以用图来表示参考资料深入之从原型到原型链强大的原型和原型链

又是一个比较重要的知识点——原型（prototype）。

一个例子

function F() {}
var f = new F()
F.prototype  // {constructor: ƒ}
f.__proto__  // {constructor: ƒ}
F.prototype === f.__proto__  // true
F.prototype.constructor === F  // true

可以看到F函数有一个属性prototype指向了一个对象{constructor: ƒ}，由F函数new出来的对象f有一个属性__proto__指向一个对象{constructor: ƒ}。且f.__proto__和F.prototype指向了同一个对象。F.prototype有一个constructor属性又指回了F本身。
总结一下即是：

prototype：JavaScript中每个函数都有一个prototype属性，此属性指向了该函数的原型对象

__proto__：JavaScript中每一个对象（null除外），包括函数创建的对象、函数自身、原型对象，都有一个__proto__属性，指向了创建该对象的函数的原型

constructor：该属性属于原型对象，指向相关的构造函数

继续探究

既然刚刚说了每一个对象包括原型对象都有__proto__属性，那么继续来试验：

// 接上一段代码
F.__proto  // ƒ () { [native code] }
F.prototype.__proto__  // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
F.__proto__ === Function.prototype  // true
F.prototype.__proto__ === Object.prototype  // true

首先，F作为一个函数的同时它也是对象，所以它拥有属性__proto__指向了Function.prototype，因为所有的函数都可以理解为Function的实例；同样的，F.prototype作为一个对象，它的__proto__指向Object.prototype，因为它是对象且没有指明的构造函数，所以它直接是Object函数生成的实例，自然__proto__就指向Object.prototype。

现在再来探究一下Object.prototype作为一个对象，它的__proto__又指向了什么呢？

Object.prototype .__proto__  // null

Object.prototype.__proto__指向了null，这也说明了null是原型链的顶端。

上述的所有指向关系可以用一张图来表示：

ps：这里面有一个细节，Function.__proto__ === Function.prototype
Function作为方法，它有自己的prototype；Function作为对象，它的__proto__指向了Function.prototype，这似乎是在说：Function方法生成了Function对象？
针对这个问题，我觉得还是看这篇文章比较合适，我就不费口舌了。

可以是使用prototype做什么？

创建对象的数据共享

function Person(){}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};
var person1 = new Person();
person1.sayName();   //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName);  //true

把一些实例共享的属性和方法放在原型上，节约空间。

基于原型链的委托继承

function Child(){}

function Parent(){
    this.name = "ppp"
}

Child.prototype = new Parent()

var c = new Child()

c.name   // "ppp"

这个原型继承的关系可以用图来表示：

参考资料：
JavaScript深入之从原型到原型链
强大的原型和原型链

服务器托管云服务器 javascript原型 javascript手册 javascript入门手册 javascript使用手册

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95223.html

【前端工程师手册】this拾遗之关于箭头函数的种种

摘要：之前总结了的一些常见绑定情况前端工程师手册之的笔记，但是还有一些没有说到，今天继续学习一下。参考资料箭头函数你不知道的上卷之前总结了this的一些常见绑定情况（【前端工程师手册】JavaScript之this的笔记），但是还有一些没有说到，今天继续学习一下。 es6箭头函数先说结论：箭头函数没有自己的this，它是根据外层(函数或者全局，后面会说到箭头函数作为某个对象的方法时的情况...

oogh 2019-08-26 11:55 评论0 收藏0
【前端工程师手册】JavaScript之this的笔记

摘要：函数别名是全局对象的属性显式绑定一个小栗子和第一个参数是一个对象，它们会把这个对象绑定到，接着在调用函数时指定这个。今天总结一下this。误解熟悉Java或者其他语言的同学看到this会想当然的认为this指向函数本身，然而在JavaScript中并不是这样子。 function func(){ console.log(this.index) } func.index ...

roland_reed 2019-08-22 17:32 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

余学文 2019-08-22 11:14 评论0 收藏0