prototype原型

构造函数的缺点

JavaScript 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部

xxxxxxxxxx
function People(name,age) {
    // 属性
    this.name = name;
    this.age = age;
    // 方法;
    this.sayHello = function(){
        console.log("Hello");
    }
}

var p1 = new People("张三",20);
var p2 = new People("李四",30);

通过构造函数为实例对象定义属性和方法，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性和方法，从而造成对系统资源的浪费

xxxxxxxxxx
console.log(p1.sayHello === p2.sayHello); // false

这个问题的解决方法，就是 JavaScript 的原型对象（prototype）

prototype 原型的作用

prototype原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，节省了内存。

怎么为对象指定原型呢，JavaScript 规定，每个函数都有一个prototype属性，指向一个对象

xxxxxxxxxx
function People() { }
console.log(People.prototype);

对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

xxxxxxxxxx
function People(name,age) {
    // 属性
    this.name = name;
    this.age = age;
}

// 原型属性
People.prototype.color = "黄种人";
// 原型方法
People.prototype.sayHello = function(){
    console.log("Hello");
}

var p1 = new People("张三",20);
var p2 = new People("李四",30);
console.log(p1.sayHello === p2.sayHello); // true
console.log(p1.color === p2.color); // true

p1和p2共享了原型属性和方法

原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。

xxxxxxxxxx
People.prototype.color = "白种人";
p1.color  // 白种人
p2.color  // 白种人

如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法

xxxxxxxxxx
p1.color = "白种人"
console.log(p1.color); // "白种人"

总结一下，原型对象的作用，就是定义所有实例对象共享的属性和方法。

实时效果反馈

1. 下列构造函数中，划横线处应该填写代码是：

xxxxxxxxxx
function People(name,age) {
    this.name = name;
    this.age = age;
}
People._1_.color = "黄种人"
People._1_.sayHello = function(){
    console.log("Hello");
}
var p1 = _2_ People("张三",20);

A prototype new

B this new

C prototype 空

D this 空

答案

1=>A