为什么需要this
在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象语言中的this不太一样：
- 常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。 也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象。
- 但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义。
如果没有this，我们更改了obj的命名 那么obj.name 都需要进行修改
this指向哪里
我们先说一个最简单的，this在全局作用于下指向什么？
- 在浏览器中测试就是指向window(globalObject) 在node环境绑定{} 空对象（因为源码中在编译的时候 使用了call）
- 但是，开发中很少直接在全局作用于下去使用this，通常都是在函数中使用。
- 所有的函数在被调用时，都会创建一个执行上下文：
- 这个上下文中记录着函数的调用栈、AO对象等； this也是其中的一条记录；
- 函数在调用时，JavaScript会默认给this绑定一个值；
- this的绑定和定义的位置（编写的位置）没有关系；
- this的绑定和调用方式以及调用的位置有关系；
- this是在运行时被绑定的；
this绑定规则
绑定一：默认绑定；
什么情况下使用默认绑定呢？独立函数调用。
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；
// 默认绑定: 独立函数调用
// 1.案例一:
function foo() {
console.log(this)
}
foo() //window
// 2.案例二:
function foo1() {
console.log(this)
}
function foo2() {
console.log(this)
foo1()
}
function foo3() {
console.log(this)
foo2()
}
foo3() //window
// 3.案例三:
var obj = {
name: "why",
foo: function() {
console.log(this)
}
}
var bar = obj.foo
bar() // window
// 4.案例四:
function foo() {
console.log(this)
}
var obj = {
name: "why",
foo: foo
}
var bar = obj.foo
bar() // window
// 5.案例五:
function foo() {
function bar() {
console.log(this)
}
return bar
}
var fn = foo()
fn() // window
var obj = {
name: "why",
eating: fn
}
obj.eating() // 隐式绑定
绑定二：隐式绑定；
隐式绑定: object.fn()
是它的调用位置中，是通过某个对象发起的函数调用
object对象会被js引擎绑定到fn函数的中this里面
- 必须在调用的对象内部有一个对函数的引用（比如一个属性）；
- 如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
- 正是通过这个引用，间接的将this绑定到了这个对象上
// 1.案例一:
var obj = {
name: "why",
foo: foo
}
obj.foo() // obj对象
// 2.案例二:
var obj = {
name: "why",
eating: function() {
console.log(this.name + "在吃东西")
},
running: function() {
console.log(obj.name + "在跑步")
}
}
// obj.eating()
// obj.running()
var fn = obj.eating
fn()
// 3.案例三:
var obj1 = {
name: "obj1",
foo: function() {
console.log(this)
}
}
var obj2 = {
name: "obj2",
bar: obj1.foo
}
obj2.bar()
绑定三：显示绑定；
如果我们不希望在对象内部包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？
- JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。
- 第一个参数是相同的，后面的参数，apply为数组，call为参数列表；
- 这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。
- 在调用这个函数时，会将this绑定到这个传入的对象上。
- bind 第一个参数为绑定的this对象，如果有其他参数放在后面依次传，返回值是函数
- call 第一个参数为绑定的this对象，如果有其他参数放在后面依次传
- apply 第一个参数为绑定的this对象，如果有其他参数放在一个数组里面
function foo() {
console.log("函数被调用了", this);
}
// 1.foo直接调用和call/apply调用的不同在于this绑定的不同
// foo直接调用指向的是全局对象(window)
foo();
//bind绑定this对象
// 默认绑定和显示绑定bind冲突: 优先级(显示绑定)
var newFoo=foo.bind('aaa')
newFoo()
var obj = {
name: "obj",
};
// call/apply是可以指定this的绑定对象
foo.call(obj);
foo.apply(obj);
foo.apply("aaaa");
// 2.call和apply有什么区别?
function sum(num1, num2, num3) {
console.log(num1 + num2 + num3, this);
}
sum.call("call", 20, 30, 40);
sum.apply("apply", [20, 30, 40]);
// 3.call和apply在执行函数时,是可以明确的绑定this, 这个绑定规则称之为显示绑定
绑定四：new绑定；
JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。
- 使用new关键字来调用函数是，会执行如下的操作：
- 1.创建一个全新的对象；
- 2.这个新对象会被执行prototype连接；
- 3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
- 4.如果函数没有返回其他对象，表达式会返回这个新对象；
// 我们通过一个new关键字调用一个函数时(构造器), 这个时候this是在调用这个构造器时创建出来的对象
// this = 创建出来的对象
// 这个绑定过程就是new 绑定
function Person(name, age) {
this.name = name
this.age = age
}
var p1 = new Person("Mike", 18)
console.log(p1.name, p1.age)
var p2 = new Person("KangKang", 30)
console.log(p2.name, p2.age)
内置函数的绑定
有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。
- 这些内置函数会要求我们传入另外一个函数；
- 我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
- 这些函数中的this又是如何绑定的呢？
// 1.setTimeout
// function mySetTimeout(fn, duration) {
// fn.call("abc")
// }
// mySetTimeout(function() {
// console.log(this) // abc
// }, 3000)
// setTimeout(function() {
// console.log(this) // window
// }, 2000)
// 2.监听点击dom绑定 隐式绑定
const boxDiv = document.querySelector('.box')
boxDiv.onclick = function() {
console.log(this)
}
boxDiv.addEventListener('click', function() {
console.log(this)
})
boxDiv.addEventListener('click', function() {
console.log(this)
})
boxDiv.addEventListener('click', function() {
console.log(this)
})
// 3.数组.forEach/map/filter/find
var names = ["abc", "cba", "nba"]
//(method) Array<string>.forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void
names.forEach(function(item) {
console.log(item, this)
}, "abc")
//(method) Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
names.map(function(item) {
console.log(item, this)
}, "abc")
规则优先级
new>显示绑定（bind/call/apply）>隐式绑定>默认绑定(独立函数调用)
- 默认规则的优先级最低 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this
- 显示绑定优先级高于隐式绑定
var obj = {
name: "obj",
foo: function() {
console.log(this)
}
}
obj.foo()
//1.call/apply的显示绑定高于隐式绑定
obj.foo.apply('abc') //abc
obj.foo.call('abc') //abc
//2.bind的优先级高于隐式绑定
var bar = obj.foo.bind("abc")
bar() //abc
// 3.更明显的比较
function foo() {
console.log(this)
}
var obj = {
name: "obj",
foo: foo.bind("aaa")
}
obj.foo() //aaa
- new绑定优先级高于隐式绑定
var obj = {
name: "obj",
foo: function() {
console.log(this)
}
}
// new的优先级高于隐式绑定
var f = new obj.foo()
- new绑定优先级高于bind new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高 new绑定可以和bind一起使用，new绑定优先级更高
// 结论: new关键字不能和apply/call一起来使用
// new的优先级高于bind
function foo() {
console.log(this)
}
// var bar = foo.bind("aaa")
// var obj = new bar()
// new绑定 > 显示绑定(apply/call/bind) > 隐式绑定(obj.foo()) > 默认绑定(独立函数调用)
this规则之外 – 忽略显示绑定
如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则
function foo() {
console.log(this)
}
foo.apply("abc")
foo.apply({})
// apply/call/bind: 当传入null/undefined时, 自动将this绑定成全局对象
foo.apply(null)
foo.apply(undefined)
var bar = foo.bind(null)
bar()
创建一个函数的 间接引用，这种情况使用默认绑定规则。赋值(obj2.foo = obj1.foo)的结果是foo函数； foo函数被直接调用，那么是默认绑定；
// 争论: 代码规范 ;
var obj1 = {
name: "obj1",
foo: function() {
console.log(this)
}
}
var obj2 = {
name: "obj2"
};
// obj2.bar = obj1.foo
// obj2.bar() //obj2
(obj2.bar = obj1.foo)() //独立函数调用
箭头函数（arrow function）
箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this 箭头函数不会绑定this，argument属性 箭头函数不能作为构造函数使用（不能和new一起使用 ，会抛出异常）
// 1.编写箭头函数
// 1> (): 参数
// 2> =>: 箭头
// 3> {}: 函数的执行体
var foo = (num1, num2, num3) => {
console.log(num1, num2, num3)
var result = num1 + num2 + num3
console.log(result)
}
function bar(num1, num2, num3) {
}
// 高阶函数在使用时, 也可以传入箭头函数
var nums = [10, 20, 45, 78]
nums.forEach((item, index, arr) => {})
// 箭头函数有一些常见的简写:
// 简写一: 如果参数只有一个, ()可以省略
nums.forEach(item => {
console.log(item)
})
// 简写二: 如果函数执行体只有一行代码, 那么{}也可以省略
// 强调: 并且它会默认将这行代码的执行结果作为返回值
nums.forEach(item => console.log(item))
var newNums = nums.filter(item => item % 2 === 0)
console.log(newNums)
// filter/map/reduce
var result = nums.filter(item => item % 2 === 0)
.map(item => item * 100)
.reduce((preValue, item) => preValue + item)
console.log(result)
// 简写三: 如果一个箭头函数, 只有一行代码, 并且返回一个对象, 这个时候如何编写简写
// var bar = () => {
// return { name: "why", age: 18 }
// }
var bar = () => ({ name: "why", age: 18 })
// 1.测试箭头函数中this指向
var name = "why"
var foo = () => {
console.log(this)
}
foo() //window
var obj = {foo: foo}
obj.foo()//window
foo.call("abc")//window
// 2.应用场景
var obj = {
data: [],
getData: function() {
// 发送网络请求, 将结果放到上面data属性中
// 在箭头函数之前的解决方案
// var _this = this
// setTimeout(function() {
// var result = ["abc", "cba", "nba"]
// _this.data = result
// }, 2000);
// 箭头函数之后
setTimeout(() => {
var result = ["abc", "cba", "nba"]
this.data = result
}, 2000);
}
}
obj.getData()
习题
习题一
var name = "window";
var person = {
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss = person.sayName;
sss(); // window: 独立函数调用
person.sayName(); // person: 隐式调用
(person.sayName)(); // person: 隐式调用
(b = person.sayName)(); // window: 赋值表达式(独立函数调用)
}
sayName();
习题二
var name = 'window'
var person1 = {
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return () => {
console.log(this.name)
}
}
}
var person2 = { name: 'person2' }
// person1.foo1(); // person1(隐式绑定)
// person1.foo1.call(person2); // person2(显示绑定优先级大于隐式绑定)
// person1.foo2(); // window(不绑定作用域,上层作用域是全局)
// person1.foo2.call(person2); // window
// person1.foo3()(); // window(独立函数调用)
// person1.foo3.call(person2)(); // window(独立函数调用)
// person1.foo3().call(person2); // person2(最终调用返回函数式, 使用的是显示绑定)
// person1.foo4()(); // person1(箭头函数不绑定this, 上层作用域this是person1)
// person1.foo4.call(person2)(); // person2(上层作用域被显示的绑定了一个person2)
// person1.foo4().call(person2); // person1(上层找到person1)
习题三
var name = 'window'
function Person (name) {
this.name = name
this.foo1 = function () {
console.log(this.name)
},
this.foo2 = () => console.log(this.name),
this.foo3 = function () {
return function () {
console.log(this.name)
}
},
this.foo4 = function () {
return () => {
console.log(this.name)
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.foo1() // person1
person1.foo1.call(person2) // person2(显示高于隐式绑定)
person1.foo2() // person1 (上层作用域中的this是person1)
person1.foo2.call(person2) // person1 (上层作用域中的this是person1)
person1.foo3()() // window(独立函数调用)
person1.foo3.call(person2)() // window
person1.foo3().call(person2) // person2
person1.foo4()() // person1
person1.foo4.call(person2)() // person2
person1.foo4().call(person2) // person1
var obj = {
name: "obj",
foo: function() {
}
}
习题四
var name = 'window'
function Person (name) {
this.name = name
this.obj = {
name: 'obj',
foo1: function () {
return function () {
console.log(this.name)
}
},
foo2: function () {
return () => {
console.log(this.name)
}
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.obj.foo1()() // window
person1.obj.foo1.call(person2)() // window
person1.obj.foo1().call(person2) // person2
person1.obj.foo2()() // obj
person1.obj.foo2.call(person2)() // person2
person1.obj.foo2().call(person2) // obj
