【转载】JS - javascript的函数调用和构造函数调用

https://blog.csdn.net/sunshine940326/article/details/52222430

 

函数调用、方法调用以及构造函数调用

1 函数调用

Function绝对是JavaScript中的重中之重。在JavaScript中，Function承担了procedures, methods, constructors甚至是classes以及modules的功能。 
在面向对象程序设计中，functions，methods以及class constructor往往是三件不同的事情，由不同的语法来实现。但是在JavaScript中，这三个概念都由function来实现，通过三种不同的模式。 
最简单的使用模式就是function 调用：

function hello(username) { 
  return "hello, " + username; 
} 
hello("Keyser Söze"); // "hello, Keyser Söze" 

• 1
• 2
• 3
• 4

2 方法调用

而methods这一概念在JavaScript中的表现就是，一个对象的属性是一个function：同样的是函数，将其赋值给一个对象的成员以后，就不一样了。将函数赋值给对象的成员后，那么这个就不在称为函数，而应该叫做方法。

var obj = { 
  hello: function() { 
    return "hello, " + this.username; 
  }, 
  username: "Hans Gruber"
};
obj.hello(); // "hello, Hans Gruber"  

• 1
• 2
• 3
• 4
• 5
• 6
• 7

真正的行为是，调用本身才会决定this会绑定到哪个对象，即： 
obj1.hello()会将this绑定到obj1，obj2.hello()则会将this绑定到obj2。记住一句话，谁调用，this就指向谁 
正因为this绑定的这种规则，在下面的用法也是可行的：

function hello() { 
  return "hello, " + this.username; 
} 

var obj1 = { 
  hello: hello, 
  username: "Gordon Gekko"
}; 
obj1.hello(); // "hello, Gordon Gekko" 

var obj2 = { 
  hello: hello, 
  username: "Biff Tannen"
};_ 
obj2.hello(); // "hello, Biff Tannen" 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

但是，在一个普通的函数中，如上面的hello函数，使用this关键字是不太好的方式，当它被直接调用的时候，this的指向就成了问题。在这种情况下，this往往被指向全局对象(GlobalObject)，在浏览器上一般就是window对象。 
而这种行为是不确定和没有意义的。 
所以在ES5标准中，如果使用了strict mode，那么this会被设置为undefined：

function hello() { 
  "use strict"; 
  return "hello, " + this.username; 
} 
hello(); // error: cannot read property "username" of undefined 

• 1
• 2
• 3
• 4
• 5

以上这种做法是为了让潜在的错误更快的暴露出来，避免了误操作和难以找到的bug。 
区别普通函数调用和方法调用，直接看这个例子就明确了。

var func = function() {
  alert(this);
};
var o = {};
o.fn = func;
// 比较
alert(o.fn === func);//true
// 调用
func();//[object Window]
o.fn();//[object Object]

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

这里的运行结果是，两个函数是相同的，因此打印结果是 true。但是由于两个函数的调用是不一样的，func 的调用，打印的是 [object Window]，而o.fn 的打印结果是 [object Object]。 
这里便是函数调用与方法调用的区别，函数调用中，this 专指全局对象 window，而在方法中 this 专指当前对象，即 o.fn 中的 this 指的就是对象o。

3 构造函数

function的第三种使用模式就是讲它作为constructor： 
构造器中的this 
我们需要分析创建对象的过程，方能知道this的意义. 如下面代码:

var Person = function() {
 this.name = "小平果";
};
var p = new Person();

• 1
• 2
• 3
• 4

这里首先定义了函数Person，下面分析一下整个执行： 
程序在执行到这一句的时候，不会执行函数体，因此 JavaScript的解释器并不知道这个函数的内容. 
接下来执行new关键字，创建对象，解释器开辟内存，得到对象的引用，将新对象的引用交给函数. 
紧接着执行函数，将传过来的对象引用交给this. 也就是说，在构造方法中，this就是刚刚被new创建出来的对象. 
然后为this 添加成员，也就是为对象添加成员. 
最后函数结束，返回this，将this交给左边的变量. 
分析过构造函数的执行以后，可以得到，构造函数中的this就是当前对象. 
构造器中的return 
在构造函数中return的意义发生了变化，首先如果在构造函数中，如果返回的是一个对象，那么就保留原意. 如果返回的是非对象，比如数字、布尔和字符串，那么就返回this，如果没有return语句，那么也返回this. 看下面代码：

// 返回一个对象的 return
var ctr = function() {
 this.name = "赵晓虎";
 return {
 name:"牛亮亮"
 };
};
// 创建对象
var p = new ctr();
// 访问name属性
alert(p.name);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

//执行代码，这里打印的结果是”牛亮亮”. 因为构造方法中返回的是一个对象，那么保留return的意义，返回内容为return后面的对象. 再看下面代码：

// 定义返回非对象数据的构造器
var ctr = function() {
 this.name = "赵晓虎";
 return "牛亮亮";
};
// 创建对象
var p = new ctr();
// 使用
alert(p);
alert(p.name);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

代码运行结果是，先弹窗打印[object Object]，然后打印”赵晓虎”. 因为这里 return 的是一个字符串，属于基本类型，那么这里的return语句无效，返回的是this对象. 因此第一个打印的是[object Object]而第二个不会打印undefined.

function User(name, passwordHash) { 
  this.name = name; 
  this.passwordHash = passwordHash; 
} 
var u = new User("sfalken", 
  "0ef33ae791068ec64b502d6cb0191387"); 
u.name; // "sfalken" 

• 1
• 2
• 3
• 4
• 5
• 6
• 7

使用new关键将function作为constructor进行调用。和function以及method调用不一样的是，constructor会传入一个新的对象并将它绑定到this，然后返回该对象作为constructor的返回值。而constructor function本身的作用就是为了初始化该对象。 
构造函数调用常犯的一个错误 
兴致勃勃地定义了下面这么个构造函数：

var Coder = function( nick ){ 
this.nick = nick; 
}; 

• 1
• 2
• 3

定义构造函数结束后呢？没错，赶紧实例化：

var coder = Coder( 'casper' );

• 1

这个coder兄弟叫什么名字？赶紧打印下：

console.log( coder.nick ); //undefined 
= =b 竟然是undefined！！再回过头看看实例化的那个语句，不难发现问题出在哪里：少了个new
var coder = Coder( 'casper' ); //当作普通的函数来调用，故内部的this指针其实指向window对象 
console.log( window.nick); //输出：casper 
var coder = new Coder( 'casper' ); //加上new，一切皆不同，this正确地指向了当前创建的实例 
console.log( coder.nick ); //输出：casper

• 1
• 2
• 3
• 4
• 5
• 6

这样的错误貌似挺低级的，但出现的概率挺高的，肿么去避免或减少这种情况的发生呢？ 
可以在内部实现里面动下手脚：

var Coder = function( nick ){ 
  if( !(this instanceof Coder) ){ 
    return new Coder( nick ); 
  } 
    this.nick = nick; 
}; 

• 1
• 2
• 3
• 4
• 5
• 6

其实很简单，实例化的时候，内部判断下，当前this指向的对象的类型即可，如果非当前构造函数的类型，强制重新调用一遍构造函数。 
突然觉得Coder这名字不够洋气？想用Hacker，好吧，我改。。。数了下，一共有三处要改，这不科学，有没有办法只把构造函数的名字改了就行？ 
当然有：

var Coder = function( nick ){ 
  if( !(this instanceof arguments.callee) ){ 
    return new arguments.callee( nick ); 
  } 
  this.nick = nick; 
}; 

• 1
• 2
• 3
• 4
• 5
• 6

4 间接调用

区分apply,call就一句话,

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3) 
1 
例如： 
A, B类都有一个message属性(面向对象中所说的成员), 
A有获取消息的getMessage方法, 
B有设置消息的setMessage方法,

var b = new B();
//给对象a动态指派b的setMessage方法,注意,a本身是没有这方法的!
b.setMessage.call(a, "a的消息");
//下面将显示"a的消息"
alert(a.getMessage());
//给对象b动态指派a的getMessage方法,注意,b本身也是没有这方法的!
alert(b.setMessage());

• 1
• 2
• 3
• 4
• 5
• 6
• 7

这就是动态语言 JavaScript call的威力所在!

简直是”无中生有”,对象的方法可以任意指派,而对象本身一直都是没有这方法的,注意是指派,通俗点就是,方法是借给另一个对象的调用去完成任务,原理上是方法执行时上下文对象改变了.

所以 b.setMessage.call(a, “a的消息”); 就等于用a作执行时上下文对象调用b对象的setMessage方法,而这过程中与b一点关系都没有, 作用等效于a.setMessage( “a的消息”);

call, apply作用就是借用别人的方法来调用,就像调用自己的一样.

好,理解了call, apply相同处—–作用后,再来看看它们的区别,看过上面例子,相信您大概知道了.

从 b.setMessage.call(a, “a的消息”) 等效于 a.setMessage( “a的消息”) 可以看出, “a的消息”在call中作为一个参数传递,

call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.当参数明确时可用call, 当参数不明确时可用apply给合arguments