JavaScript中的原型、原型对象与原型链

JavaScript中每个对象都有一个_proto_属性指向这个对象构造函数的prototype对象，构造函数的prototype对象也有一个_proto_属性指向上层构造函数的prototype对象，最终指向null，形成原型链。

 

在JavaScript中，当试图访问一个对象的属性时，它不仅仅在该对象上查找，还会查找该对象的原型（这个对象构造函数的prototype对象），以及该对象的原型的原型（上层构造函数的prototype对象），一层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

 

 

 

 

 

 

 

 

 

 

<html>
<head></head>
<body></body>
<script>

// 一、Foo是一个构造函数
function Foo(name) {
  this.name = name;
  this.age = 20;
  this.test = "你好，查找顺序02"
}

// 二、newFoo是Foo的实例对象
let newFoo = new Foo("李明");
newFoo.test = "你好，查找顺序01"

// 三、newFoo的原型，也就是Foo的原型对象，是Foo.prototype：
console.log(`三、${
  newFoo.__proto__ === Foo.prototype
}`)
Foo.prototype.fn = function() {
  console.log("f");
}
Foo.prototype.test = "你好，查找顺序03";

// 四、Foo.prototype的原型是Object.prototype：
console.log(`四、${
  Foo.prototype.__proto__ === Object.prototype
}`)
Object.prototype.test = "你好，查找顺序04";


// 原型链查找顺序：
// 1.实例对象自身：newFoo
// 2.实例对象的构造函数：Foo
// 3.实例对象的原型，也就是构造函数的原型对象：
console.log(`3.${
  newFoo.__proto__ === Foo.prototype
}`);
// 4.实例对象的原型的原型，也就是构造函数的原型对象的原型，在这里是Object的原型对象：
console.log(`4.${
  newFoo.__proto__.__proto__ === Foo.prototype.__proto__ 
  && Foo.prototype.__proto__ === Object.prototype
}`);


console.log(newFoo.test);


// 打印结果：
// 三、true
// 四、true
// 3.true
// 4.true
// 你好，查找顺序01


</script>
</html>

 

posted @ 2021-02-09 21:54  starlog  阅读(121)  评论(0)  编辑  收藏  举报