this

一、上几道题开开胃

1 🤔

var obj = {
    name: 'a',
    say: function(){
        console.log(this.name)
    }
}

var say = obj.say;

obj.say();  
say();

答案

a
undefined

在对象里面调用 和 被声明成独立的全局引用 是不一样的

obj.say(); 就是在 obj 对象里面查找 say 函数，执行环境是 obj 对象，this 指向 obj，this.name 就是 obj 里面的 name

var say = obj.say; 这时候 say 被声明成全局函数，在全局作用域下没有 name 这个变量，输出 undefined；如果在全局下给 name 赋值一个值，say() 就指向那个值了

注：这类题对应下文中【二、理解两种函数调用的写法差异】，是阮一峰教程中的经典例子

2 🤨

var a = 1;

function foo(){
    console.log(this.a)
}

var obj = {
    a: 2,
    foo: foo
  };

obj.foo();

答案

foo 是在 obj 里被调用的，foo 的地址被指向 obj 的 "foo" 属性，即 foo 函数的环境就是 obj 对象

3 😤

var length = 10;

function fn () {
    console.log(this.length);
}
 
var obj = {
    length: 5,
    method: function (fn) {
        fn();
    }
};
 
obj.method(fn);

答案

在外面的全局变量 length 是 10，在 obj 对象里面的 length 是 5

这里 fn 是被当做 method 的参数传入的，但是调用它的不是 obj 对象，而是 window，所以输出全局变量 10

如果把 obj 改造成加上 call 的绑定 this，输出的结果就不一样了

var obj = {
    length: 5,
    method: function (fn) {
        // 在这里用call 将 this 指向 obj 自己
        fn.call(this);
    }
};

输出对象内部的 5

二、理解两种函数调用的写法差异

from 阮一峰的网络日志

学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。

var obj = {
  foo: function () {}
};

var foo = obj.foo;

// 写法一
obj.foo()

// 写法二
foo()

这两种写法的结果是不一样的

对于obj.foo()来说，foo运行在obj环境

对于foo()来说，foo运行在全局环境

三、this 是什么

this 是 JavaScript 中的一个关键字

被运用于函数体内，依赖于函数调用的上下文条件，与函数被调用的方式有关

this 的指向，完全是由函数被调用的调用者来决定的

this 是在运行时绑定，而与编写时的绑定无关

this 可以说是一种简洁函数表达，优化值的传递的一种方法，不可能每次都给函数具体的传值参数，会有很多隐式的引用形式的数据，用 this 表达更简洁

🧁 this 指向的就是函数运的执行环境

JavaScript 允许在函数体内部，引用当前环境的其他变量。

所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。

所以，this 就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

稍微地总结一下：

独立函数调用时，this 指向全局对象（window）；如果使用严格模式，this 绑定至 undefined
函数 this 是指向调用者

四、几种不同函数不同的 this 指向

一共6种函数

1️⃣普通函数

//定义
function fn(){
	console.log('hello js');
}

//调用
fn();
fn.call();

this 指向 window

2️⃣对象的方法

//定义
var ob = {
    say: function(){
        console.log('hello js');
    }
}

//调用
ob.say();

this 指向对象

3️⃣构造函数

//定义
function Run(){};

//调用
var a = new Run();

this 指向（a）实例对象

4️⃣绑定事件函数

//定义
btn.onclick = function(){};

//调用
点击就可以调用这个函数

this 指向函数的调用者（btn对象）

5️⃣定时器函数

//定义
setInterval(function(){}, 1000);

//调用
函数是定时器自动1秒钟调用一次

this 指向 window

6️⃣立即执行函数

//定义
(function(){
    console.log('hello js');
})();

//调用
立即执行函数是自动调用

this 指向 window

五、箭头函数中的 this

箭头函数使得 this 从“动态”变成“静态”（固定）

箭头函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

普通函数的 this，是运行时的对象。

一个例子

var id = 10;

// 普通函数
function foo() {
  setTimeout(function() {
    console.log(this.id);
  }, 100);
}

// 箭头函数
function foo1() {
  setTimeout(() => {
    console.log(this.id);
  }, 100);
}

foo();  // 10
foo1();  // 10

当没有其他条件值的参与的时候，调用两个函数。

普通函数的 this 在运行时绑定，定时器的 this 指向 window，即全局变量 id = 10

箭头函数的 this 在定义时绑定，定义时在函数作用域内找不到 id，跳到外层找到全局变量 id = 10

现在我们加上 call 绑定

var id = 10;

// 普通函数
function foo() {
  setTimeout(function() {
    console.log(this.id);
  }, 100);
}

// 箭头函数
function foo1() {
  setTimeout(() => {
    console.log(this.id);
  }, 100);
}

var obj = {
    id: 100
}

foo.call(obj);  // 10
foo1.call(obj);  // 100

把两个函数绑定给了 obj 对象

对于箭头函数，让 this 绑定了定义时所在的作用域 -- obj，所以输出的 id 是 obj 对象里的 100

普通函数，运行时定时器还是在全局作用域上，输出的还是全局变量 id = 10

六、apply call bind 的用法

apply

调用一个具有给定 this 值的函数，改变函数的 this 指向

以数组（伪数组）的形式传递

function.apply(thisArg, [argsArray])

thisArg：在 func 函数运行时使用的 this 值
argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数

具体写

var f = function() {
    console.log(this.x)
}

var x = 1;

f(); // 1   全局变量 x 的1

var b = {
    x: 2,
    y: 4,
    z: 8
}

f.apply(b, [x]);   // 2

将 this 绑到第一个参数上，一般以对象的形式传输

把参数用得更透彻一些

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);

// array: ["a", "b", 0, 1, 2]

求数组最大值最小值

Math.max 不能对数组进行操作，只能加上...

var arr = [1, 3, 13, 34, 6];
var max = Math.max(...arr);
console.log(max)  // 34

使用 apply

var arr = [1,3,13,34,6];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);

call

调用函数，改变函数内的 this 指向

call 的主要作用可以实现继承

接受的是参数列表

function.call(thisArg, arg1, arg2, ...)

thisArg：在 function 函数运行时使用的 this 值。
arg1, arg2, ...：指定的参数列表。

一个简单的例子，打印名字

var name = "none";

function identify() {
    return this.name.toUpperCase();
}

var me = {
    name: "Kyle"
};

var you = {
    name: "Reader"
};

identify();  // "NONE"
identify.call(me); // "KYLE"
identify.call(you); // "READER"

bind

不会调用函数，改变函数内部 this 指向，且会产生一个新的函数

function.bind(thisArg, arg1, arg2...)

thisArg：在 function 函数运行时指定的 this 值
arg1, arg2：传递的其他参数

具体写

关于定时器中的 this 指向

var name = 1;

var myObj = {
    name: 2,
    showName: function () {
        console.log(this.name);
    }
}

setTimeout(myObj.showName, 1000) // 输出1

定时器上下文中的 this 会被设置为全局 window

（如果是严格模式，会被设置为 undefined）

所以输出的 this.name 是全局的 name，与 myObj 对象无关了

通过 bind 改变 this 绑定，绑定到 myObj 对象上

setTimeout(myObj.showName.bind(myObj), 1000)

总结

相同点：

都可以改变函数内部的 this 指向

不同点：

call 和 apply 会调用函数，并且改变函数内部的 this 指向
call 和 apply 传递的参数不一样，call 传递单个参数，apply 传递数组形式
bind 不会调用函数，可以改变函数内部的 this 指向
bind 会产生一个新的函数

主要应用场景：

call 经常做继承
apply 跟数组有关系，借助于数学对象
bind 用于定时器内部指向

聊聊JavaScript中的this

this

一、上几道题开开胃

二、理解两种函数调用的写法差异

三、this 是什么

四、几种不同函数不同的 this 指向

五、箭头函数中的 this

六、apply call bind 的用法

apply

call

bind