JavaScript高级 – 2 – 改变函数内部this指向（call、apply、bind）

JavaScript高级 – 2 – 改变函数内部this指向（call、apply、bind）

• 1. 函数的定义和调用
• 1.1 函数的定义方式
• 1.2 函数的调用

• 2.1 函数内部的this指向
• 2.2 改变函数内部 this 指向
• 2.2.1 call方法
• 2.2.2 apply方法
• 2.2.3 bind方法
• 2.2.4 call、apply、bind三者的异同

1. 函数的定义和调用

1.1 函数的定义方式

1. 方式1：函数声明方式 function 关键字 (命名函数)

   function fn(){}

2. 方式2：函数表达式(匿名函数)

   var fn = function(){}

3. 方式3：new Function()

   var f = new Function(\'a\', \'b\', \'console.log(a + b)\');f(1, 2);var fn = new Function(\'参数1\',\'参数2\'..., \'函数体\')

   注意：

   Function 里面参数都必须是字符串格式
   第三种方式执行效率低，也不方便书写，因此较少使用
   所有函数都是 Function 的实例(对象)
   函数也属于对象

1.2 函数的调用

• 普通函数

  function fn() {console.log(\'人生的巅峰\');}fn();

• 对象的方法

  var o = {sayHi: function() {console.log(\'人生的巅峰\');}}o.sayHi();

• 构造函数

  function Star() {};new Star();

• 绑定事件函数

  btn.onclick = function() {};   // 点击了按钮就可以调用这个函数

• 定时器函数

  setInterval(function() {}, 1000);  这个函数是定时器自动1秒钟调用一次

• 立即执行函数(自调用函数)

  (function() {console.log(\'人生的巅峰\');})();

2. this 指向

2.1 函数内部的this指向

这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同.

一般指向我们的调用者.

2.2 改变函数内部 this 指向

2.2.1 call方法

call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向

应用场景： 经常用做继承.

var o = {name: \'andy\'}function fn(a, b) {console.log(this);console.log(a+b)};fn(1,2)  // 此时的this指向的是window 运行结果为3fn.call(o,1,2)  // 此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

以上代码运行结果为：

2.2.2 apply方法

apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

应用场景： 经常跟数组有关系

var o = {name: \'andy\'}function fn(a, b) {console.log(this);console.log(a+b)};fn()  // 此时的this指向的是window 运行结果为3fn.apply(o,[1,2])  // 此时的this指向的是对象o,参数使用数组传递 运行结果为3

以上代码运行结果为：

2.2.3 bind方法

bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数。

应用场景： 不调用函数,但是还想改变this指向

var o = {name: \'andy\'};function fn(a, b) {console.log(this);console.log(a + b);};var f = fn.bind(o, 1, 2);  // 此处的f是bind返回的新函数f();  // 调用新函数  this指向的是对象o 参数使用逗号隔开

以上代码运行结果为：

2.2.4 call、apply、bind三者的异同

• 共同点：都可以改变this指向

• 不同点：

  call 和 apply 会调用函数, 并且改变函数内部this指向.

• call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递

• bind 不会调用函数, 可以改变函数内部this指向.