原型链

61 阅读2分钟

我们先来看个实例:

function cat(){}
console.log(cat.pototype)

运行如上代码后,控制台上面应该出现了像这样的一个对象.

现在我们往cat的原型上添加一些属性,如下

function cat(){}
cat.prototype.run = "fast";
console.log( cat.prototype );

控制台:

此时run属性已经添加到cat的原型中了,然后我们创建一个实例,给danceCat对象添加一个dance属性,

function cat(){}
cat.prototype.run = "fast"; 
var danceCat= new cat();
danceCat.dance = "can dance"; 
console.log(danceCat)

此时我们可以看到其实danceCat__proto__属性就是cat.prototype。也就是说,当你访问一个danceCat的一个属性,浏览器会先查看danceCat是否有这个属性,如果有就使用。如果没有这个属性,就会从danceCat__proto__属性中去找,如果有就使用。如果没有就继续从danceCat__proto____proto__属性继续寻找,看是否有这个属性。如果没有就继续往下找,直至找到,如果原型链上面的所有的 __proto__ 都被找完了,那浏览器所有已经声明了的__proto__上都不存在这个属性,然后得出结论,这个属性是undefined

所以什么是原型链呢?

JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上,而非对象实例本身。

在传统的 OOP 中,首先定义“类”,此后创建对象实例时,类中定义的所有属性和方法都被复制到实例中。在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接(它是__proto__属性,是从构造函数的prototype属性派生的),之后通过上溯原型链,在构造器中找到这些属性和方法。

参考自 mdn 原型链