Question

如何理解JavaScript语言精粹中的函数化模式

Answer 1

1.方法调用模式
当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到该对象。

[javascript] view plain copy

function A() {
this.x = 1; //定义a.x
this.b = function () { //定义a.b
this.helper = function () { //定义a.helper
console.log(this); //4.console.log(a)
}
this.helper(); //3.调用a.helper(); 此时的helper，是一个方法，所以helper中的this指向a
}
this.b(); //2.调用a.b(),此时的b是a的一个属性，所以是一个方法，所以b中的this指向a
}
var a = new A(); //1.创建a对象

输出： A {x:1}
2.函数调用模式
当一个函数不是一个对象的属性时，就是被当做一个函数来调用的。此时this被绑定到全局对象。
[javascript] view plain copy

function A() {
this.x = 1;
this.b = function () {
var helper = function () {
console.log(this);
}
helper(); //此时的helper不是任何对象的属性，只是一个函数
}
this.b();
}
var a = new A();

输出: Window {external: Object, ......}

3.构造器调用模式
用new关键字，此时this被绑定到创建出来的新对象上。

[javascript] view plain copy

function A() {
this.x = 1;
this.b = function () {
this.helper = function () { //定义aa.helper
console.log(this); //4.console.log(aa)
}
this.helper(); //3.调用aa.helper(); 此时的helper，是一个方法，所以helper中的this指向aa
}
var aa = new this.b(); //2.创建一个新的对象aa，所以b()中的this指向aa
}
var a = new A(); //1.创建a对象

输出: A.b {} ;

另外，这里举Splunk吉祥物pony的例子来说一说new操作符做的事情：

[javascript] view plain copy

function Pony(color) {
// var this = Object.create(Pony.prototype);

// instance members
this.color = color;

// private members
var age = 50;

// private methods
function secreteMethod() {
console.log('Secret!');
}

// make private member visible due to closure
this.getAge = function() {
console.log('My age is : ' + age);
};

// return this;
}

// methods
Pony.prototype.tellColor = function() {
console.log('I am ' + this.color);
};

// static attributes
Pony.type = 'horse';

var pony = new Pony('white');
pony.tellColor();
pony.getAge();

what happens?

[javascript] view plain copy

var pony = new Pony('white');
// equals
var pony = {};
pony.__proto__ = Pony.prototype;
Pony.call(pony, 'white');

4.apply调用模式
js是一门函数式的面向对象编程语言，所以函数可以有方法。apply（or call）方法允许我们构建一个参数数组传递给调用函数，也允许我们选择this的值。它接受两个参数，第一个是要绑定给this的值，第二个是一个参数数组。
[javascript] view plain copy

function People (name) {
this.name = name;
}
People.prototype.greet = function () {
console.log('hi,'+this.name);
};
var dog = {
name: 'hobbo'
};
People.prototype.greet.apply(dog);
输出： hi,hobbo

总结：
this默认指向global object
当函数作为对象的属性被调用时，函数中的this指向那个对象
当使用new操作符来调用函数时，函数中的this指向新创建的对象
当使用apply或者call来调用函数时，this指向被传给call活apply的第一个参数。如果第一个参数是空或者不是一个对象，this指向global object