本笔记整理自codewhy老师的腾讯课程《深入理解JavaScript高级语法》~
🔥🔥🔥更多知识,欢迎访问我的个人博客:Nan-ying’s Blog
🔥前端三件套之 JavaScript 高级 | 地址 |
---|---|
(二)浏览器和 JavaScript 的运行原理、内存管理 | https://blog.csdn.net/weixin_42771853/article/details/129171479 |
(三)函数、对象增强和继承 | https://blog.csdn.net/weixin_42771853/article/details/129171589 |
(四)E6 ~E13 新特性 | https://blog.csdn.net/weixin_42771853/article/details/129171646 |
(五)Promise、异步async await、防抖节流等 | https://blog.csdn.net/weixin_42771853/article/details/129171690 |
(六)网络请求和响应 | https://blog.csdn.net/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关键字来调用函数,会执行如下的操作:
- 创建一个全新的对象;
- 这个新对象会被执行prototype连接;
- 这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成);
- 如果函数没有返回其他对象,表达式会返回这个新对象;
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