文章目录
  1. 1. 记读<>
  2. 2. 函数调用的几种模式
  3. 3. 方法调用函数调用构造函数调用的区别
    1. 3.1. 方法调用 Method Invocation
    2. 3.2. 函数调用
    3. 3.3. 构造函数调用
  4. 4. 函数调用和this
    1. 4.1. ‘错误’代码
    2. 4.2. 代码改进
  5. 5. Reference

这边讲的是JavaScript的函数调用和this

记读<<JavaScript语言精粹>>

不敢跳过,毕竟这个是THE REAL GOOD PART OF JAVASCRIPT | XP
看完发现自己大部分也差不多了解了, 这个里面的火车图有点想吐槽啊…看得一愣一愣的…

函数调用的几种模式

  1. 方法调用(Method Invocation)
  2. 函数调用(Function Invocation)
  3. 构造函数调用(Constructor Invocation)
  4. apply和call调用(Apply And Call Invocation)

方法调用函数调用构造函数调用的区别

方法调用 Method Invocation

1
2
3
4
5
6
7
8
var obj = {
value: 0,
increment: function(){
this.value ++;
// this --> obj
}
};
obj.increment();

函数调用

1
2
3
4
fucntion add( a, b ){
return a + b;
}
add(1,2); //函数调用

构造函数调用

混合了经典的面向对象的语法和自身原型性质(C++和Java中,实例是通过使用new操作符生成)

1
2
3
4
5
6
7
var instance = function(){
return {
name: 'Nexus',
model: '5x'
};
}
var inst1 = new instance();

函数调用和this

由于js一开始的设计缺陷,导致存在这个bug:函数调用模式中this会指向一个全局变量window.xxx

‘错误’代码

1
2
3
4
5
6
7
8
9
10
11
12
13
var value = 500;
var obj = {
value: 0,
increment: function(){
alert(this.value); //0 方法调用模式

var innerFunction = function(){
alert(++this.value); //501 函数调用模式
}
innerFunction();
}
}
obj.increment();

运行之后可以很明显的看出来第二个alert居然指向了全局的变量window.value
原因已经在上文中谈到

代码改进

利用js函数内声明的变量会存在运行域这个特性,来构造一个that(约定俗成的一个变量名了= =)

1
2
3
4
5
6
7
8
9
10
11
12
13
var value = 500;
var obj = {
value: 0,
increment: function(){
alert(this.value); //0
var that = this;
var innerFunction = function(){
alert( ++that.value ); //1
}
innerFunction();
}
}
obj.increment();

Reference

JavaScript: Function Invocation Patterns
CoffeeXu

文章目录
  1. 1. 记读<>
  2. 2. 函数调用的几种模式
  3. 3. 方法调用函数调用构造函数调用的区别
    1. 3.1. 方法调用 Method Invocation
    2. 3.2. 函数调用
    3. 3.3. 构造函数调用
  4. 4. 函数调用和this
    1. 4.1. ‘错误’代码
    2. 4.2. 代码改进
  5. 5. Reference