【整理+总结】JavaScript 高级（一）函数 this 指向

本笔记整理自codewhy老师的腾讯课程《深入理解JavaScript高级语法》~

🔥🔥🔥更多知识，欢迎访问我的个人博客：Nan-ying’s Blog

🔥前端三件套之 JavaScript 高级	地址
（二）浏览器和 JavaScript 的运行原理、内存管理	https://blog.youkuaiyun.com/weixin_42771853/article/details/129171479
（三）函数、对象增强和继承	https://blog.youkuaiyun.com/weixin_42771853/article/details/129171589
（四）E6 ~E13 新特性	https://blog.youkuaiyun.com/weixin_42771853/article/details/129171646
（五）Promise、异步async await、防抖节流等	https://blog.youkuaiyun.com/weixin_42771853/article/details/129171690
（六）网络请求和响应	https://blog.youkuaiyun.com/weixin_42771853/article/details/129171717

一. this 的绑定规则

1. 绑定规则

1.1 默认绑定

什么情况下使用默认绑定呢？独立函数调用。

独立的函数调用：函数没有被绑定到某个对象上进行调用

var obj = {
	name: 'why',
	bar: function () {
		console.log(this);
	}
}
var baz = obj.bar;
baz();// 独立函数调用，输出仍是window

function fool(fn) {
	fn();
}
fool(obj.bar);// 高阶函数,window

1.2 隐式绑定

隐式绑定的调用位置中，是通过某个对象发起的函数调用

function foo() {
	console.log(this);
}
var obj = {
	bar: foo
}

obj.bar();// obj

1.3 显式绑定

• 隐式绑定有一个前提条件：

  • 必须在调用的对象内部有一个对函数的引用（比如一个属性）；
  • 如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
  • 正是通过这个引用，间接的将this绑定到了这个对象上；

• 如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？

• JavaScript所有的函数都可以使用call和apply方法

1.3.1 apply 和 call

• 第一个参数是相同的，要求传入一个对象
  • 在调用这个函数时，会将this绑定到这个传入的对象上。
• 后面的参数，apply为数组，call为参数列表
  • foo.call('call', 'kobe', 30, 1.9);
  • foo.apply('apply', ['james', 25, 2.0]);

1.3.2 bind

如果我们希望一个函数总是显式绑定到一个对象上，可以怎么做呢？

• 使用bind方法，bind() 方法创建一个新的绑定函数（bound function，BF）
  • 绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语）
• 在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用（传参不经常使用，阅读性差）。

function foo(name, age, height, address) {
	console.log('foo函数：', this);
	console.log(name, age, height, address);
}
obj = {
	name: 'why'
}

var bar = foo.bind(obj, 'kobe', 30, 1.9);
bar('T2 Stress');
bar();
bar();
bar();
bar();

1.4 new 绑定

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字

使用new关键字来调用函数，会执行如下的操作：

1. 创建一个全新的对象；
2. 这个新对象会被执行prototype连接；
3. 这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
4. 如果函数没有返回其他对象，表达式会返回这个新对象；

function Fun(name) {
	this.name = name;
	console.log(this);
}

var a = new Fun('ldh'); // 实例Fun对象

2. 内置函数的规则

• 有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。
  • 这些内置函数会要求我们传入另外一个函数；
  • 我们自己并不会显式调用这些函数，而是 JavaScript 内部或者第三方库内部会帮助我们执行；
• 这些函数中的this绑定规则一般都基于经验
  • setTimeout 绑定 window
  • div的点击绑定点击的那个div
  • 数组的forEach绑定

var names = ['abc', '123', 'wsd'];
names.forEach(function () {
	console.log(this);
}, 'name'); // 绑定三次name字符串对象String

3. 规则的优先级

• new > bind > apply/call > 隐式绑定 > 默认绑定

• new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高

4. 规则之外的情况

4.1 忽略显式绑定

如果在显式绑定中，我们传入一个null或者undefined，那么这个显式绑定会被忽略，使用默认绑定

4.2 间接函数引用(了解)

创建一个函数的 间接引用，这种情况使用默认绑定规则

(obj2.foo = obj1.foo)();
上面函数赋值给 obj2 的为 foo 函数，因此返回foo，函数立即调用 foo

二. 箭头函数的使用

箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：

• 箭头函数不会绑定this、arguments属性
• 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）

1. 箭头函数的写法

1.1 基本写法

(函数的参数) => {函数的执行体}

1.2 优化写法

• 只有一个参数时，可以省略()

• 只有一行代码时，可以省略{}

  • 这行代码的返回值会作为箭头函数的默认返回值，所以可以省略return

• 如果函数执行体返回一个对象, 在省略{}的时候, 对象必须使用()包裹
  • () => ({ name: 'why' })

2. 箭头函数中的this

箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。

this的查找规则:

• 去上层作用域中查找this
• 直到找到全局this

3. 箭头函数this应用

案例：模拟网络请求

//网络请求工具函数
function request(url, callbackFn) {
	var results = ['abc', '123', 'wsd'];// 用户请求这些数据
	callbackFn(results);// 回调传参
}

//实际操作的位置
var obj = {
	name: [],
	network: function () {
		// 1.早期做法
		// var _this = this;
		// request('/names', function (res) {
		//	_this.name = [].concat(res);
		// })
		// 2.箭头函数写法
		request('/names/www', (res) => {
			this.name = [].concat(res);// this 查找到network函数的this
		})
	}
}

obj.network();
console.log(obj);

三、面试题

面试题1

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();

面试题2

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 () { // 1.this为person1 2.this为person2 3.this为person1
		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
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1

面试题3

var name = 'window'
function Person(name) {
	this.name = name;
	//console.log(this); //此时才与new绑定相关
	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() // 上层作用域function Person(name){} 查找 person1
person1.foo2.call(person2) // call没有起效，仍去上层找 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（隐式绑定）

面试题4

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