0%

JavaScript -- prototype 和 _proto_ 的个人理解

JavaScript – prototype 和 _proto_ 的个人理解

  1. 只有函数才有 prototype 。
  2. prototype 是 函数对象的一个属性。
  3. 子对象的 proto 是 父类 身上的 prototype 所声明的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function A() {
this.name =' 我是A';
this.cat = function () {
console.log('现在我是 cat')
};
this.fun = function () {
console.log('我是自己 fun()')
}
conso.log(this)
}
A.prototype.cat = function () {
console.log('现在我是prototype cat');
};
A.prototype.name = '我是prototype A';

A.prototype.show = function () {
console.log('我是prototype show()')
}

let b = new A();
console.log(b.name); // 我是A
console.log(b.cat()); //现在我是 cat
console.log(b.show()); //我是prototype show()
console.log(b.__proto__.name); //我是prototype A
console.log(b.__proto__.fun); // undefined

  1. 可以看到 子对象 是继承了 父类 this 对象 和 父类的 prototype 属性。this 对象和 prototype 属性 中属性名一样的时候,并不是覆盖,而是 this的优先级高于 prototype ,有则用 this身上的,没有再找prototype的,如果还没有,只能去 Object.prototype找,最后没有才是 undefined.

4.proto叫隐式原型,js里面每个对象都会有一个proto属性,它指向的是创建这个对象的构造函数的prototype。

  1. 子对象. proto == 父类.prototype
    Object.prototype 是原型链的顶端。

  2. js 传值的问题,`b.__proto__.name 改变,A.prototype.name 也会一起改变。 所以才有了组合继承的方式,用一个函数来当中间媒介

    1
    2
    3
    4
    5
    6
    7
    8
    function inherit(son, father) {   
    // 使用F空函数当子类和父类的媒介 是为了防止修改子类的原型对象影响到父类的原型对象
    function F() {}
    F.prototype = father.prototype;
    son.prototype = new F();
    son.prototype.constructor = son; // 防止new的时候 返回实例的构造函数指向混乱
    son.prototype.uber = father.prototype; // 寻找继承的原型是谁
    }
  3. 网上的解释图