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

是时候要总结一下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为原型创建两个新的对象,且添加新的属性logovar landWind = Object.create(landRover);landWind.name = "landWind";var landCruiser = Object.create(landRover);landCruiser.name = "landCruiser";// 新对象可以调用定义在原型中的方法landWind.start();landCruiser.run();//控制台输出landWindconsole.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