js(八) 原型

原型 prototype

重要概念

• prototype属于 构造函数 的属性
• 通过同一个构造函数实例化出的对象，拥有共同的prototype属性
• 构造函数规范：动态的值，一般会写在构造函数内部，以传参的方式进行改动。方法和常量值，会写在构造函数的prototype上，被实例所继承。

function Car(args) {
    this.name = args.name;
    this.color = args.color;
};

Car.prototype = {
    printMyCar : function (){
        console.log(this.name + this.color);
    }
};
const car = new Car({name: 'Benz', color: 'red'});
car.printMyCar(); // Benzred

构造器 construtor

• constructor属于构造函数的prototype中，指向的是构造函数本身。

function Car(name, age) {
    this.name = name;
    this.age = age;
}

console.log(Car.prototype);

• constructor可以被更改

function Tel() {}

function Car(name, age) {
    this.name = name;
    this.age = age;
}
Car.prototype.constructor = Tel;
console.log(Car.prototype);

原型 __proto__

• __proto__是在实例化对象时生成的一个属性，存放于this中。
• __proto__是属于实例化对象的。
• __proto__是一个容器，默认存放的就是其构造函数的prototype。

function Car(name, color) {
    this.name = name;
    this.color = color;
}

Car.prototype = {
    print: function () {
        console.log(this.name + this.color);
    }
};
const car = new Car('Benz', 'red');
console.log(car);

• __proto__可以被更改。

function Tel(name, age) {
    this.name = name;
    this.age = age;
}

Tel.prototype = {
    telPrint: function () {
        console.log(this.name + this.age);
    }
};

function Car(name, color) {
    this.name = name;
    this.color = color;
}

Car.prototype = {
    print: function () {
        console.log(this.name + this.color);
    }
};

const car = new Car('Benz', 'red');
car.__proto__ = Tel.prototype;
car.telPrint(); // Benzundefined

QA

1. 执行以下代码，输出什么？

function Car() {}
Car.prototype.name = 'lily';

const car  = new Car();
Car.prototype.name = 'lucy';

console.log(car.name); // lucy

2. 执行以下代码 ，输出什么？

function Car() {}

Car.prototype.name = 'lily';

const car = new Car();
Car.prototype = {
    name: 'lucy'
};

console.log(car.name); // lily
console.log(car);