Javascript构造函数和原型

原文:http://tobyho.com/2010/11/22/javascript-constructors-and/

相信你已经知道了，Javascript函数也可以作为对象构造器。比如，为了模拟面向对象编程中的Class，可以用如下的代码

function Person(name){
    this.name = name
}

*注意：我不使用分号因为我是个异教徒！ *
不管怎么说，你现在有了一个function，你可以使用new操作符来创建一个Person

var bob = new Person('Bob')
// {name: 'Bob'}

为了确认bob确实是一个Person，可以这么做

bob instanceof Person
// true

你同样可以把Person作为一个普通函数调用——不使用new

Person('Bob')
// undefined

但是这里会返回undefined.同时，你在不经意间创建了一个全局变量name，这可不是你想要的。

name
// 'Bob'

嗯...这一点也不好，特别是如果你已经有一个名为name的全局变量，那么它将会被覆盖。这是因为你直接调用了一个函数(不适用new)，this对象被设置为全局对象——在浏览器中，就是window对象。

window.name
// 'Bob'
this === window
// true

所以...如果你想写一个构造器函数，那么就用构造器的方式使用它(使用new)，如果你想写一个普通函数，那么就以函数的方式使用它(直接调用)，不要相互混淆。

注：一个较好的代码习惯就是，构造器函数首字母大写，普通函数首字母小写。如function Person(){}是一个构造器函数，function showMsg(){}是一个普通函数。

有些人也许会指出，可以使用一个小技巧避免污染全局变量。

function Person(name){
    if (!(this instanceof Person))
        return new Person(name)
    this.name = name
}

这段代码做了三件事

检查this对象是否是Person的实例——如果使用new操作符的话就是。
如果它确实是Person的实例，执行原有的代码。
如果它不是Person的实例，使用new操作符创建一个Person的实例——这才是正确的使用姿势，然后返回它。

这就允许使用函数形式调用构造器函数，返回一个Person对象，不会污染全局命名空间。

Person('Bob')
// {name: 'Bob'}
name
// undefined

神奇的是使用new操作符同样可行

new Person('Bob')
// {name: 'Bob'}

为什么呢？这是因为当你使用new操作符创建一个对象时，如果你在构造函数里面主动返回一个对象，那么new表达式的值就是这个返回的对象；如果没有主动返回，那么构造函数会默认返回this。但是，你可能会想，我可不可以返回一个非Person对象呢？这就有点像欺诈了~

function Cat(name){
    this.name = name
}
function Person(name){
    return new Cat(name)
}
var bob = new Person('Bob')
bob instanceof Person
// false
bob instanceof Cat
// true

所以，我创建一个Person结果我得到了一个Cat？好吧，在Javascript中这确实可能发生。你甚至可以返回一个Array

function Person(name){
    return [name]
}
new Person('Bob')
// ['Bob']

但是这有一个限制，如果你返回一个原始数据类型，返回值将不起作用。

function Person(name){
    this.name = name
    return 5
}
new Person('Bob')
// {name: 'Bob'}

Number,String,Boolean，都是原始数据类型。
如果你在构造器函数里面返回这些类型的值，那么它将会被忽略，构造器将按照正常情况，返回this对象。

注：原始数据类型还包含undefined和null。但如果你使用new操作符创建原始数据类型，它将会是一个对象

typeof (new String('hello')) === 'object' // true
typeof (String('hello')) === 'string' // true

方法

在最开始的时候我，我说过函数也可以作为构造器，事实上，它更像身兼三职。函数同样可以作为方法。
如果你了解面向对象编程的话，你会知道方法是对象的行为——描述对象可以做什么。在Javascript中，方法就是链接到对象上的函数——你可以通过创建一个函数并把它赋值到对象上，来创建对象的方法。

function Person(name){
    this.name = name
    this.sayHi = function(){
        return 'Hi, I am ' + this.name
    }
}

Bob现在可以say Hi了！

var bob = new Person('Bob')
bob.sayHi()
// 'Hi, I am Bob'

事实上，我们可以脱离构造函数，创建对象的方法

var bob = {name: 'Bob'} // this is a Javascript object!
bob.sayHi = function(){
    return 'Hi, I am ' + this.name
}

这同样可行。或者，如果你喜欢的话，把它写成一个更大的object

var bob = {
    name: 'Bob',
    sayHi: function(){
        return 'Hi, I am ' + this.name
    }
}

所以，我们为什么还需要构造函数呢？答案是继承。

原型和继承

好吧，我们谈谈继承。你肯定知道继承，对吧？比如在Java中，你可以让一个类继承另一个类，就可以自动得到所有父类的方法和变量了。

public class Mammal{
    public void breathe(){
        // do some breathing
    }
}
public class Cat extends Mammal{
    // now cat too can breathe!
}

那么，在Javascript中，我们可以做同样的事情，只是有些不同。首先，我们甚至没有类！取而代之的是prototype。下面就是与Java代码等价的Javascript代码。

function Mammal(){
}
Mammal.prototype.breathe = function(){
    // do some breathing
}
function Cat(){
}
Cat.prototype = new Mammal()
Cat.prototype.constructor = Cat
// now cat too can breathe!

Javascript不同于传统的面向对象语言，它使用原型继承。简而言之，原型继承的工作原理如下：

一个对象有许多属性，包含普通属性和函数。
一个对象有一个特殊的父属性，它也被称为这个对象的原型，用__proto__表示。这个对象可以继承它父对象的所有属性。
一个对象可以通过在自身设置属性，重写父对象的的同名属性
构造器用于创建对象。每一个构造器都有一个相关联的prototype对象，它其实也是一个普通对象。
创建一个对象时，该对象的父对象(__proto__)被设置为创建它的构造器的prototype对象。

好的！现在你应该明白原型继承是怎么一回事了，接下来我们一行一行看Cat这个例子

首先，我们创建了一个构造器Mammal

function Mammal(){
}

这时候，Mammal已经有了一个prototype属性

Mammal.prototype
// {}

我们创建一个实例

var mammal = new Mammal()

现在，我们验证一下上面提到的第2条

mammal.__proto__ === Mammal.prototype
// true

接下来，我们在Mammal的prototype属性上增加一个方法breathe

Mammal.prototype.breathe = function(){
    // do some breathing
}

这时候，实例mammal就可以调用breathe了

mammal.breathe()

因为它从Mammal.prototype继承过来。往下

function Cat(){
}
Cat.prototype = new Mammal()

我们创建了一个Cat构造器，设置Cat.prototype为Mammal的实例。为什么要这么做呢？

var garfield = new Cat()
garfield.breathe()

现在所有的cat实例都继承自Mammal，所以它也能够调用breathe方法，往下

Cat.prototype.constructor = Cat

确保cat确实是Cat的实例

garfield.__proto__ === Cat.prototype
// true
Cat.prototype.constructor === Cat
// true
garfield instanceof Cat
// true

每当你创建一个Cat的实例，你就会创建一个二级原型链，即garfield是Cat.prototype的子对象，而Cat.prototype为Mammal的实例，所以也是Mammal.prototype的子对象。

那么，Mammal.prototype的父对象是谁呢？没错，你也许猜到了，那就是Object.prototype。所以，实际上是三级原型链。

garfield -> Cat.prototype -> Mammal.prototype -> Object.prototype

你可以在garfield的父对象上增加属性，然后garfield就可以神奇的访问到这些属性，即使在garfield对象创建之后！

Cat.prototype.isCat = true
Mammal.prototype.isMammal = true
Object.prototype.isObject = true
garfield.isCat // true
garfield.isMammal // true
garfield.isObject // true

你也可以知道它是否有某个属性

'isMammal' in garfield
// true

并且你也可以区分自身的属性和继承而来的属性

garfield.name = 'Garfield'
garfield.hasOwnProperty('name')
// true
garfield.hasOwnProperty('breathe')
// false

在原型上创建方法

现在你应该理解了原型继承的原理，让我们回到第一个例子

function Person(name){
    this.name = name
    this.sayHi = function(){
        return 'Hi, I am ' + this.name
    }
}

直接在对象上定义方法是一种低效率的方式。一个更好的方法是在Person.prototype上定义方法。

function Person(name){
    this.name = name
}
Person.prototype.sayHi = function(){
    return 'Hi, I am ' + this.name
}

为什么这种方式更好？

在第一种方式中，每当我们创建一个person对象，一个新的sayHi方法就要被创建，而在第二种方式中，只有一个sayHi方法被创建了，并且在所有Person的实例中共享——这是因为Person.prototype是它们的父对象。所以，在prototype上创建方法会更加高效。

Apply & Call

正如你所见，函数凭借添加到对象上而成为了一个对象的方法，那么这个函数内的this指针应该始终指向这个对象，不是么?事实并不是这样。我们看看之前的例子。

function Person(name){
    this.name = name
}
Person.prototype.sayHi = function(){
    return 'Hi, I am ' + this.name
}

你创建两个Person对象，jack和jill

var jack = new Person('Jack')
var jill = new Person('Jill')
jack.sayHi()
// 'Hi, I am Jack'
jill.sayHi()
// 'Hi, I am Jill'

在这里，sayHi方法不是添加在jack或者jill对象上的，而是添加在他们的原型对象上：Person.prototype。那么，sayHi方法如何知道jack和jill的名字呢？

答案：this指针没有绑定到任何对象上，直到函数被调用时才进行绑定。

当你调用jack.sayHi()时，sayHi的this指针就会绑定到jack上；当你调用jill.sayHi()是，它则会绑定到jill上。但是，绑定this对象不改变方法本身——它还是同样的一个函数！

你同样可以为一个方法指定所要绑定的this指针的对象。

function sing(){
    return this.name + ' sings!'
}
sing.apply(jack)
// 'Jack sings!'

apply方法属于Function.prototype(没错，函数也是一个对象并且有prototypes和自身的属性!)。所以，你可以在任何函数中使用apply方法绑定this指针为指定的对象，即使这个函数没有添加到这个对象上。事实上，你甚至可以绑定this指针为不同的对象。

function Flower(name){
    this.name = name
}
var tulip = new Flower('Tulip')
jack.sayHi.apply(tulip)
// 'Hi, I am Tulip'

你可能会说

等等，郁金香怎么会说话呢！

我可以回答你

任何人是任何事，任何事是任何人，颤抖吧人类@_@

只要这个对象有一个name属性，sayHi方法就会很乐意把它打印出。这就是鸭子类型准则

如果一个东西像鸭子一样嘎嘎叫，并且它走起来像鸭子一样，对我来说它就是鸭子！

那么回到apply函数：如果你想使用apply传递参数，你可以把它们构造成一个数组作为第二个参数。

function singTo(other){
    return this.name + ' sings for ' + other.name
}
singTo.apply(jack, [jill])
// 'Jack sings for Jill'

Function.prototype也有call函数，它和apply函数非常相似，唯一的区别就是call函数依次把参数列在末尾传递，而apply函数接收一个数组作为第二个参数。

sing.call(jack, jill)
// 'Jack sings for Jill'

new方法

现在，有趣的事情来了。

当你想调用一个有若干个参数的函数时，apply方法十分的方便。比如，Math.max方法接受若干个number参数

Math.max(4, 1, 8, 9, 2)
// 9

这很好，但是不够抽象。我们可以使用apply获取到任意数组的最大值。

Math.max.apply(Math, myarray)

这有用多了！

既然apply这么有用，你可能会在很多地方想使用它，比起

Math.max.apply(Math, args)

你可能更想在构造器函数中使用

new Person.apply(Person, args)

遗憾的是，这不起作用。它会认为你把Person.apply整体当做了构造函数。那么这样呢？

(new Person).apply(Person, args)

这同样也不起作用，因为他会首先创建一个person对象，然后在尝试调用apply方法。

怎么办呢？StackOverflow上的这个回答是个好主意

我们可以在Function.prototype上创建一个new方法

Function.prototype.new = function(){
    var args = arguments
    var constructor = this
    function Fake(){
         constructor.apply(this, args)
    }
    Fake.prototype = constructor.prototype
    return new Fake
}

这样，所有的构造器函数都有一个new方法

var bob = Person.new('Bob')

我们分析一下new方法的原理

首先

var args = arguments
var constructor = this
function Fake(){
     constructor.apply(this, args)
}

我们创建了一个Fake构造器，在constructor上调用apply方法。在new方法的上下文中，this对象指的就是真实的构造器函数——我们把它保存在constructor变量中，同样的，我们也把new方法上下文的arguments保存在args变量中，以便在Fake构造器中使用。往下

Fake.prototype = constructor.prototype

我们设置Fake.prototype为原来的构造器的prototype。因为constructor指向的还是原始的构造函数，他的prototype属性还是原来的。所以通过Fake创建的对象还是原来的构造器函数的实例。最后

return new Fake

使用Fake构造器创建一个新对象并返回。

明白了么？第一次不明白没关系，多看几遍就能理解了！

总而言之，现在我们可以干一些很酷的事情了。

var children = [new Person('Ben'), new Person('Dan')]
var args = ['Bob'].concat(children)
var bob = Person.new.apply(Person, args)

很好！为了不写两遍Person，我们可以添加一个辅助方法

Function.prototype.applyNew = function(){
     return this.new.apply(this, arguments)
}

现在你可以这样使用

var bob = Person.applyNew(args)

这就展示了Javascript是一门灵活的语言。即使它有些使用方法不是你想要的，你也可以模拟去做。

总结

这篇文章到这里就结束了，我们学习了

Constructors构造器
Methods and Prototypes方法和原型
apply & call
实现一个new方法

最后编辑于：2017.12.04 07:47:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

Javascript构造函数和原型

方法

原型和继承

在原型上创建方法

Apply & Call

new方法

总结

推荐阅读更多精彩内容