javascript面向对象编程学习(一)

459 阅读2分钟

在学习javascript面向对象编程之前,我们有必要先了解什么是原型和原型链!

1. 什么是原型?

javascript中,函数可以有属性。 每个函数都有一个特殊的属性叫作原型(prototype
①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype

var b = {}
b.__proto__ === Object.prototype; // true

2. 什么是原型链?

JavaScript 只有一种结构:对象。每个实例对象( object )都有一个私有属性(称之为 __proto__ )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( __proto__ ) ,层层向上直到一个对象的原型对象为 null
根据定义,null 没有原型,并作为原型链中的最后一个环节。

2.1 访问对象属性的过程是怎样的?

当我们访问对象的某个属性时,首先在对象本身查找;如果没有,则会去它的原型__proto__查找,也就是他的构造函数的原型对象(prototype),如果还是没找到就会继续在构造函数的prototype__proto__查找,这样一层层往上查找,如果找到null还没有找到此属性,则返回undefined

eg:

function Fruits(name){
   this.name = name;
}

const variety = new Fruits('香蕉');
console.log(variety.name); // 香蕉
console.log(variety.num);  // undefined
console.log(Fruits.prototype === variety.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

查找步骤: variety中查找属性 -> variety.__proto__(Fruits.prototype) -> Fruits.prototype.__proto__(Object.prototype) -> Object.prototype.__proto__(null) -> 返回undefined

说明:

  • 当执行以上步骤中,如果查找到该值,即返回该值;
  • 因为Fruits.prototype是对象,所以其构造函数为Object
  •  console.log(Fruits.prototype.__proto__ === Object.prototype);   // true
    

4. 参考文献

一、【原型和原型链】什么是原型和原型链
二、对象原型
三、继承与原型链

5. 总结

其实原型链就好像一个子孙找祖宗的过程,根据是否有血缘关系,一层一层往上找!

6. tip

本人正在尝试写博客,写得不好轻喷,指出就好!