以原型构造新对象的两种方式

是时候要总结一下JS中的原型了,在看过一些资料之后,对JS原型有了较深入系统的了解,在这里写下来一方面是总结加深理解,另一方面是供给初学者参考。文本主要涉及使用原型构造对象,下面一篇文章讲原型链。

方法一：Object.create()

Object.create(proto)即以proto对象为原型构造一个新对象
举例说明:

// 创建landRover对象
var landRover = {
    name: "landRover",
    start:function(){
        console.log(this.name + " start!");
    },
    run: function(){
        console.log(this.name + " is running!");
    }
}
// 以landRover为原型创建两个新的对象,且添加新的属性logo
var landWind = Object.create(landRover);
landWind.name = "landWind";
var landCruiser = Object.create(landRover);
landCruiser.name = "landCruiser";
// 新对象可以调用定义在原型中的方法
landWind.start();
landCruiser.run();
//控制台输出landWind
console.log(landWind);

下面是上面的代码创建对象的图解：

下面是控制台输出的对象 landWind：

可以看出 landWind 的_proto_指向对象landRover

方法二：使用构造函数

理解部分：

函数在JS中可以作为构造函数，可以使用构造函数来创建自定义的对象。
函数有一个prototype属性(注意不同于_proto_)用来设置通过该构造函数创建出来的对象的原型。
而函数的_proto_属性指向的是函数本身的原型,即Function.prototype
因为函数本身也是通过构造函数(Function)创建出来的对象,即函数的原型是其构造函数Function的prototype属性即Function.prototype

举例说明：

function Car(name){
    this.name = name||"unknown name";
    //  如果name是空字符串,则返回"unknown name"
}
// 设置Car的prototype属性(赋值给一个普通对象),即以Car()为构造函数创建出来的对象的原型
//
Car.prototype = {
    start:function(){
        console.log(this.name + " start!");
    },
    run:function(){
        console.log(this.name + " is running!");
    }
}
// 使用Car()构造函数创建对象
var landRover = new Car("landRover");
var landWind = new Car("landWind");
// 调用原型中的方法
landRover.start();
landWind.run();

下面是上面代码的图解：

可以看出由Car()构造出来的对象的原型都是Car.prototype，定义在Car.prototype中的所有属性都会被共享。

使用new关键字创建对象的步骤如下：

var landRover = new Car("landRover");

1. 创建对象landRover
2. 设置landRover对象的原型为Car.prototype，即landRover._ proto _ = Car.prototype
3. 使用landRover 替代构造函数中的this来执行构造函数。通过这一步，可以为landRover添加name属性并赋值。

参考文章：
http://javascript.info/prototype-inheritance