JavaScript | 浅析 prototype 与 proto 的区别

JavaScript原型模式与原型继承解析

原创已于 2022-10-25 20:14:13 修改 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #原型模式 #前端

于 2022-10-25 20:08:11 首次发布

JavaScript 进阶之路专栏收录该内容

14 篇文章

订阅专栏

本文围绕JavaScript的原型模式展开。先介绍了JavaScript中除特定内容外多为派生，通过代码展示原型好处，可查看Object原型及原型链。还阐述了原型继承，定义函数并在原型链分配属性，实例变量访问属性时会从原型链查找。

在这里插入图片描述

概述

JavaScript里，除了null 和 undefined之外，几乎所有的内容都是来自Object的派生。prototype与__proto__是JS中特殊存在，二者都是对象所拥有的一组特殊属性。

从一段代码开始

看下面的代码片段：

var fooFunc = function() {
    return {
        foo: 42
    }
};
fooFunc.prototype.bar = 'baz';
var fooVal = fooFunc();
console.log(fooVal);   // {foo: 42}
console.log(fooFunc.prototype);     // {bar: "baz", constructor: ƒ}

在这个例子中，我们可以看到原型的好处。函数 fooFunc 是从 Object 实例派生出来的，它有自己的一组属性，例如{ bar: baz } ，以及它从 Object 实例化时所携带的任何东西，例如{constructor: f }。

我们知道，fooFunc 是从 Object 派生出来的，那么是否可以向上查看 Object 的原型？答案是肯定的

console.log('prototype of fooFunc:');
console.log(fooFunc.prototype);     // {bar: "baz", constructor: ƒ}
console.log('prototype of Object:');
console.log(fooFunc.prototype.__proto__);   // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

从上面的代码中，可以看到对象的所有其他原型都驻留在它的__proto__属性中。控制台最后一行输出，就是对象的原型链。

当我们尝试遍历 Object 的原型链，会发生什么呢？

console.log(fooFunc.prototype); // {bar: "baz", constructor: ƒ}
console.log(fooFunc.prototype.__proto__);// {constructor: ƒ, __defineSetter__: ƒ, …}
console.log(fooFunc.prototype.__proto__.__proto__);     // null

控制台最后一行表示Object 没有父级。

原型继承

我们既然已经知道了原型是如何工作的，那么理解原型继承将变得简单。

var obj = function(){
    this.firstName = 'Varun';
    this.lastName = 'Dey'
}
obj.prototype.age = 25;
var nameObj = new obj()
console.log(nameObj.age);   // 25

定义一个函数obj
在obj原型链上直接分配一个属性年龄
据obj实例出一个nameObj 变量，并且有属性firstName、 lastName 和age。
当程序访问age属性时，因nameObj里没有。程序便从nameObj.__proto__原型链上查找，并找到age。值得一提的是，nameObj.__proto__ 就是obj.prototype