目录
默认绑定
非严格模式下，this 指向全局对象（window / self / global）
严格模式下，函数内的 this 指向 undefined，全局中的 this 指向不会改变
let、const、var 变量的默认绑定
let、const 声明的全局变量，不会被绑定到 window 上
var 声明的全局变量，会被绑定到 window 上
let a = 10
const b = 20
function foo () {
console.log(this.a) // undefined
console.log(this.b) // undefined
}
foo();
console.log(window.a) // undefined 隐式绑定
当函数引用有上下文对象时，如 obj.foo() 的调用方式，foo() 内的 this 指向 obj
也就是说，谁调用函数，函数内的this就指向谁（无论是普通对象、还是全局对象）,this永远指向最后调用它的那个对象不考虑箭头函数）
隐式丢失
隐式丢失：被隐式绑定 的函数,在特定的情况下会丢失绑定对象
容易发生隐式丢失的两种情况：
-
使用另一个变量来给函数取别名
取别名:使用一个变量（var foo2 = obj.foo），或一个对象（var obj2 = { a: 3, foo2: obj.foo } ）
如果发生了 this 隐式丢失，则使用上一层 this 替代丢失的 this（可能是 window，可能是 obj）
function foo () {
console.log(this.a)
};
var obj = { a: 1, foo };
var a = 2;
var foo2 = obj.foo;
var obj2 = { a: 3, foo2: obj.foo }
// -----------------------------------------------------------------
// 此处的 this 指向 obj，被 obj 调用进行了隐式绑定，因此打印 obj 中的 a
// this 指向调用者 obj
obj.foo(); // 1
// foo2 指向了 obj.foo 函数
// 由于使用 另一个变量 foo2 给函数取别名，发生了 this 丢失，导致 obj 丢了
// obj 丢了，就找上层 this；是 window 调用了 foo2，除了 obj 外，上层就是 window 了
// 综上：foo2() 发生了隐式丢失，调用者是 window，使得 foo() 中的 this 指向 window
foo2(); // 2
// obj2.foo2() 发生了隐式丢失，调用者是 obj2，使得 foo() 中的 this 指向 obj2
obj2.foo2(); // 3将函数作为参数传递时，会被隐式赋值，回调函数丢失 this 绑定，如 setTimeout
将函数作为参数传递时，会发生的隐式丢失，与包裹着 函数参数 的 外层函数 的 this 指向无关（比如外层函数的 this 指向 obj2对象，但是隐式丢失后，this 和 obj2 不会有关系，只跟 window/undefined 有关系）
在非严格模式下，隐式丢失后，会把函数的 this 绑定到 window 上；
在严格模式下，会把函数的 this 绑定到 undefined 上；
发生隐式丢失后，永远不会把函数的 this 绑定在 其他对象 上；
非严格模式下:
function foo () {
console.log(this.a)
}
function doFoo (fn) {
// 因为这里是 window 调用的它，所以 doFoo() 函数内的 this 本来就指向 window
console.log(this) // Window{...}
// 函数当参数传入，发生了隐式丢失（也就是 obj 没了），因此 foo 指向了 window
fn() // 2
}
var obj = { a: 1, foo }
var a = 2
var obj2 = { a: 3, doFoo }
// 将 obj.foo 当成参数传递到 doFoo 函数中，发生了隐式丢失，因此 foo 指向了 window
doFoo(obj.foo)
// doFoo 此时被 obj2 调用，this 指向 obj2
// 但是由于 obj.foo 函数被当作参数传入，导致 this 隐式丢失
// 隐式丢失 与包裹着的函数 this 没有关系，也就是和 obj2 没有关系
// 所以指向 window，打印 window 中的 a，而不是 obj2 中的 a
obj2.doFoo(obj.foo) // 2严格模式下:
"use strict"
function foo () {
console.log(this.a)
}
function doFoo (fn) {
// 被 obj2 调用，this 指向 obj2
console.log(this) // { a:3, doFoo: f }
// 函数当参数，发生 this 隐式丢失，隐式丢失和 函数参数 的 外层函数this 没有关系
// 因此指向 window，也就是 window.a = 2
// 又因为 严格模式 函数内的 this 始终为 undefind，因此获取不到 a 变量，报错
fn() // Uncaught TypeError: Cannot read property 'a' of undefined
}
var obj = { a: 1, foo }
var a = 2
var obj2 = { a: 3, doFoo }
obj2.doFoo(obj.foo)setTimeout:
var obj2 = {
a: 2,
foo1: function () {
// 普通函数内的 this 指向调用它的对象
console.log(this.a) // 2
},
foo2: function () {
// setTimeout 回调中的 this（对象调用绑定的 this），会丢失，因此指向 window
setTimeout(function () {
console.log(this) // window
console.log(this.a) // 3
}, 0)
}
}
// 全局变量
var a = 3
obj2.foo1()
// 虽然是被 obj2 调用的，但是由于定时器接收函数作为参数，导致 this 丢失
// 因此指向的 obj2 丢失，因此最终指向了 window
obj2.foo2()new构造函数绑定
this指向新生的对象
var name = 'aaa';
// 构造函数
function Person (name) {
this.name = name
this.foo1 = function () {
console.log(this.name)
}
this.foo2 = function () {
return function () {
console.log(this.name)
}
}
}
var person1 = new Person('Test');
// 打印的是对象里的值
person1.foo1() // Test
// 执行匿名函数，是 window 调用的，因此打印 window 下的 name
person1.foo2()() // aaa箭头函数绑定
箭头函数内的 this 始终由外层作用域决定；无法被 call 等方式修改；在定义时就已经确定 this 指向了，执行时无法改变 this 指向
var obj = {
name: 'obj',
// 箭头函数
foo1: () => {
console.log(this.name) // window
},
// 普通函数
foo2: function () {
console.log(this.name) // obj
// 箭头函数
return () => {
console.log(this.name) // obj
}
}
}
// 全局变量
var name = 'window'
// 对象 obj 不属于作用域（作用域只有全局作用域、函数作用域、块级作用域）
// foo1() 箭头函数的外层作用域是 window，所以会打印出 window
obj.foo1()
// 首先会执行 obj.foo2()，这不是箭头函数，所以它里面的 this 指向调用它的 obj 对象
// 返回的匿名函数是一个箭头函数，它的 this 由外层作用域决定，也就是 foo2 的函数作用域
obj.foo2()()call(),apply(),bind()显示绑定
作用:主要用来改变this指向
call()的用法
调用fn.call时会将fn中的this指向修改为传入的第一个参数thisArg；将后面的参数传入给fn,并立即执行函数fn
fn.call(thisArg, arg1, arg2, arg3, ...)
let obj = {
name: "xiaoming",
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
}
}
obj.sayHello('程序员', '看书'); // 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看书。
let obj1 = {
name: "lihua",
age: 30
}
// obj1.sayHello(); // Uncaught TypeError: obj1.sayHello is not a function
obj.sayHello.call(obj1, '设计师', '画画'); // 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。apply()的用法
fn.apply的作用和call相同：修改this指向，并立即执行fn。区别在于传参形式不同，apply接受两个参数，第一个参数是要指向的this对象，第二个参数是一个数组，数组里面的元素会被展开传入fn,作为fn的参数。
apply(thisArg, [argsArr])
let obj = {
name: "xiaoming",
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
}
}
obj.sayHello('程序员', '看书'); // 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看书。
let obj1 = {
name: "lihua",
age: 30
}
obj.sayHello.apply(obj1, ['设计师', '画画']); // 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。bind()的用法
bind(thisArg, arg1, arg2, arg3, ...)
fn.bind的作用是只修改this指向，但不会立即执行fn；会返回一个修改了this指向后的fn。需要调用才会执行:bind(thisArg, arg1, arg2, arg3, ...)()。bind的传参和call相同。
let obj = {
name: "xiaoming",
age: 24,
sayHello: function (job, hobby) {
console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
}
}
// obj.sayHello('程序员', '看书'); // 我叫xiaoming,今年24岁。我的工作是: 程序员，我的爱好是: 看书。
let obj1 = {
name: "lihua",
age: 30
}
obj.sayHello.bind(obj1, '设计师', '画画'); // 无输出结果
obj.sayHello.bind(obj1, '设计师', '画画')(); // 我叫lihua,今年30岁。我的工作是: 设计师，我的爱好是: 画画。bind()、call()、apply()的区别
相同点 1.三个都是用于改变this指向； 2.接收的第一个参数都是this要指向的对象； 3.都可以利用后续参数传参。 不同点 1.call和bind传参相同，多个参数依次传入的； 2.apply只有两个参数，第二个参数为数组； 3.call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
