javascript 面向对象学习（一）—

最近在学习设计模式，找了很多资料也没有看懂，看到怀疑智商，怀疑人生，思来想去还是把锅甩到基础不够扎实上。虽然原型继承、闭包、构造函数也都有学习过，但理解得不够透彻，影响到后续提高。这次重新开始学习，一边记录总结，希望有所收获，如果能对一起学习的小伙伴有帮助就更好了。

第一篇先从构造函数谈起。构造函数顾名思义，是用来构造的，构造什么呢？构造对象。在 javascript 中，对象是拥有属性和方法的数据。举个简单的例子，如果把一个人看作一个对象，那么年龄、性别等就是它的属性，吃饭、睡觉等是它的方法。我们来创建一个 jack 对象：

var jack = {

    name: 'Jack',

    jump: function() {

        console.log('Jack-jump')

    }

}

如果我们想再创建一个 rose 对象，还需要把上面的代码再写一遍，而二人仅仅是名字不同。这时候我们会想到用一个函数来创建对象，对象名字可通过传参获取。

function createPerson(name) {

    var person = {}

    person.name = name

    person.jump = function() {

        console.log(name + '-jump')

    }
    return person

}

测试结果

var jack = createPerson('Jack')

jack.jump() // Jack-jump

var rose = createPerson('Rose')

rose.jump() // Rose-jump

这个函数可以满足我们的需求，但不够简洁，下面我们来看一下怎么利用构造函数来创建对象

function Person(name) {

    this.name = name

    this.jump = function() {

        console.log(this.name + '-jump')

    }

}

是不是简洁了很多？当我们需要创建具体人物时，使用 new 关键词来创建对象，创建出来的对象也叫做实例。

var jack = new Person('Jack')

jack.jump() // Jack-jump
var rose = new Person('Rose')

rose.jump() // Rose-jump

这里需要解释一下 this 和 new 的意义。细心的人会发现在写构造函数时函数名首字母用了大写，显得和普通函数不一样，有些神秘，其实构造函数和普通函数本质上并没有什么不同，用大写仅仅是为了同普通函数区分，表示这是一个要用来创建对象的函数。重点在关键词 new 上，简单来说，new 一个实例有以下步骤：

1. 创建一个新对象

2. 将构造函数作用域赋给新对象（即 this 指向新对象）

3. 执行函数里的代码

4. 返回函数

我们发现1、3、4就是 createPerson 函数所做的事，至于2涉及到作用域比较复杂，后面有时间再研究总结，现在只要知道 this 指向了 new 出来的新对象，因此我们给 this 增加的属性和方法都会绑定到新对象上去。

至此我们知道了如何利用构造函数（其实本质上是用 new 关键词）创建对象，它比一般函数直接创建要简洁很多。

巴特西

javascript 面向对象学习（一）——构造函数

最新文章

热门文章