原型

219 阅读2分钟

什么是原型

Father.prototype 就是原型英文名称,它是一个对象,也称它为原型对象。

原型的作用

原型的作用就是共享方法,通过Father.prototype.method,不会反应开辟空间储存方法。

原型的中的this指向

原形中的this指向是实例。

原型链

什么是原型链原型与原型层相连的过程叫原型链。

原型链的应用

对象可以使用prototype原型对象的使用属性和方法,因为对象有_proto_原型的存在每个对象。

function Star(name,age) {
        this.name = name;
        this.age = age;
}
    Star.prototype.dance = function(){
        console.log('我在跑步',this.name);
};
let obj = new Star('cy',20);
console.log(obj.__proto__ === Star.prototype);//true

原型链图

image.png

原型的查找方式

如:查找obj的dance方法 function Star(name) { this.name = name;

    (1)首先看obj对象身上是否有dance方法,如果有,则执行对象身上的方法
    this.dance = function () {
        console.log(this.name + '1');
    }
}

(2)如果没有dance方法,就去构造函数原型对象prototype身上去查找dance这个方法。
Star.prototype.dance = function () {
    console.log(this.name + '2');
};

(3)如果再没有dance方法,就去Object原型对象prototype身上去查找dance这个方法。
Object.prototype.dance = function () {
    console.log(this.name + '3');
};
(4)如果再没有,则会报错。
let obj = new Star('小红');
obj.dance();
  1. 首先看obj对象身上是否有dance方法,如果有,则执行对象身上的方法。
  2. 如果没有dance方法,就去构造函数原型对象prototype身上去查找dance这个方法。
  3. 如果还没有dance方法,就去object原型对象prototype身上去查找dance这个方法.
  4. 如果继续没有,依旧没找到,就会报错.

原型的构造器

原型的构造器指向构造函数。

function Star(name) {
      this.name = name;
  }
  let obj = new Star('小红');
  console.log(Star.prototype.constructor === Star);//true
  console.log(obj.__proto__.constructor === Star); //true

原型上添加方法需要注意的点

方法1:构造函数.prototype.方法在原型对象上直接添加方法此时的原型对象有constructor构造器,构造器指向函数本身。

function Star(name) {
    this.name = name;
}
Star.prototype.dance = function () {
    console.log(this.name);
};
let obj = new Star('小红');
console.log(obj.__proto__);  //{dance: ƒ, constructor: ƒ}
console.log(obj.__proto__.constructor);  // Star

方法2:Star.prototype = {}给原形重新赋值,此时会丢失构造器需要手动构造器,并指回构造函数本身

function Star(name) {
    this.name = name;
}
Star.prototype = {
    dance: function () {
        console.log(this.name);
    }
};
let obj = new Star('小红');
console.log(obj.__proto__); //{dance: ƒ}
console.log(obj.__proto__.constructor); //  ƒ Object() { [native code] }
Star.prototype.constructor = Star;

一般不允许直接改变原型prototype指向

改变原型指向会是原来的方法找不到,所以Array、String,这些内置的方法不允许改变原型指向的,如果改变就是报错。

 Array.prototype.getSum = function (arr) {
    let sum = 0;
    for (let i = 0; i < this.length; ++i) {
        sum += this[i];
    }
    return sum;
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.getSum());//45

如果改变prototype指向,会报错!

Array.prototype = {
    getSum: function (arr) {
        let sum = 0;
        for (let i = 0; i < this.length; ++i) {
            sum += this[i];
        }
        return sum;
    }
};
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.getSum());//45