JavaScript原型与原型链

原型

任何一个对象都有原型

1.创建一个对象

function Preson () {
  this.name = 'zs';
  this.age = 18;
}

2.在Proson的原型上创建一个方法

Preson.prototype.say = function say () {
  console.log('Hello ');
};

3.验证:创建两个Preson对象的实例,这两个对象都能共享访问到原型上的方法say

//创建一个两个实例  证明原型对象上的方法可以共享
//其所有属性和方法,都能被构造函数的实例对象共享访问
let p1 = new Preson();
let p2 = new Preson();
//直接调用方法 
p1.say();      // 输出Hello
p2.say();     // 输出Hello

4.构造器:constructor

console.log(Preson.prototype.constructor === Preson)   //true  证明相等

结合下图可知Preson.prototype.constructor又指向了Preson对象

JavaScript原型与原型链_第1张图片

原型链(结合上图)

function Preson () {

}
//实例
let p1 = new Preson();
let p2 = new Preson();

.__proto__属性是JS对象中的一个内置属性(所有对象都有),一般情况下指向的是构造函数的prototype属性

1.比较 所有__proto__这个属性指向的是构造函数的prototype这个属性

console.log(p1.__proto__ === Preson.prototype)  //true

2.理解函数为什么也有__proto__属性(JS方面万物皆对象)

console.log(Preson.__proto__ === Function.prototype);  //true

当JS引擎查找对象的某个属性时,先查找对象本身是否存在该属性,如果不存在,就会在原型链上一层层往上查找

示例:
Preson.prototype.say = function say () {
  console.log('Hello');
}
p1.say(); // 因为 p1.__proto__ === Preson.prototype
//用一个比较特殊的方法
p1.toString();
console.log(p1.__proto__);//这上面没有继续寻祖
console.log(p1.__proto__.__proto__);  //这上面存在toString这个方法
console.log(p1.__proto__.__proto__.__proto__); //最终为null

你可能感兴趣的:(JavaScript,原型与原型链,面试,javascript,prototype,js,node.js,es6)