this
是很多人会混淆的概念,但是其实他一点都不难,你只需要记住几个规则就可以了。
function foo() { console.log(this.a) } var a = 1 foo() var obj = { a: 2, foo: foo } obj.foo() // 以上两者情况 `this` 只依赖于调用函数前的对象,优先级是第二个情况大于第一个情况 // 以下情况是优先级最高的,`this` 只会绑定在 `c` 上,不会被任何方式修改 `this` 指向 var c = new foo() c.a = 3 console.log(c.a) // 还有种就是利用 call,apply,bind 改变 this,这个优先级仅次于 new
以上几种情况明白了,很多代码中的 this
应该就没什么问题了,下面让我们看看箭头函数中的 this
function a() { return () => { return () => { console.log(this) } } } console.log(a()()())
箭头函数其实是没有 this
的,这个函数中的 this
只取决于他外面的第一个不是箭头函数的函数的 this
。在这个例子中,因为调用 a
符合前面代码中的第一个情况,所以 this
是 window
。并且 this
一旦绑定了上下文,就不会被任何代码改变。
instanceof
可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype
。
我们也可以试着实现一下 instanceof
function instanceof(left, right) { // 获得类型的原型 let prototype = right.prototype // 获得对象的原型 left = left.__proto__ // 判断对象的类型是否等于类型的原型 while (true) { if (left === null) return false if (prototype === left) return true left = left.__proto__ } }
在调用 new
的过程中会发生以上四件事情,我们也可以试着来自己实现一个 new
function create() { // 创建一个空的对象 let obj = new Object() // 获得构造函数 let Con = [].shift.call(arguments) // 链接到原型 obj.__proto__ = Con.prototype // 绑定 this,执行构造函数 let result = Con.apply(obj, arguments) // 确保 new 出来的是个对象 return typeof result === 'object' ? result : obj }
对于实例对象来说,都是通过 new
产生的,无论是 function Foo()
还是 let a = { b : 1 }
。
对于创建一个对象来说,更推荐使用字面量的方式创建对象(无论性能上还是可读性)。因为你使用 new Object()
的方式创建对象需要通过作用域链一层层找到 Object
,但是你使用字面量的方式就没这个问题。
function Foo() {} // function 就是个语法糖 // 内部等同于 new Function() let a = { b: 1 } // 这个字面量内部也是使用了 new Object()
对于 new
来说,还需要注意下运算符优先级。
function Foo() { return this; } Foo.getName = function () { console.log('1'); }; Foo.prototype.getName = function () { console.log('2'); }; new Foo.getName(); // -> 1 new Foo().getName(); // -> 2
从上图可以看出,new Foo()
的优先级大于 new Foo
,所以对于上述代码来说可以这样划分执行顺序
new (Foo.getName()); (new Foo()).getName();
对于第一个函数来说,先执行了 Foo.getName()
,所以结果为 1;对于后者来说,先执行 new Foo()
产生了一个实例,然后通过原型链找到了 Foo
上的 getName
函数,所以结果为 2。
每个函数都有 prototype
属性,除了 Function.prototype.bind()
,该属性指向原型。
每个对象都有 __proto__
属性,指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]
,但是 [[prototype]]
是内部属性,我们并不能访问到,所以使用 proto 来访问。
对象可以通过 __proto__
来寻找不属于该对象的属性,__proto__
将对象连接起来组成了原型链。
不知道你有没有写过类似的代码,反正以前我是写过
function test() { let arr = [3, 2, 1] arr.forEach(async item => { const res = await fetch(item) console.log(res) }) console.log('end') } function fetch(x) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(x) }, 500 * x) }) } test()
我当时期望的打印顺序是
3 2 1 end
结果现实与我开了个玩笑,打印顺序居然是
end 1 2 3
其实原因很简单,那就是 forEach
只支持同步代码。
我们可以参考下 Polyfill
版本的 forEach
,简化以后类似就是这样的伪代码
while (index < arr.length) { // 也就是我们传入的回调函数 callback(item, index) }
从上述代码中我们可以发现,forEach
只是简单的执行了下回调函数而已,并不会去处理异步的情况。并且你在 callback
中即使使用 break
也并不能结束遍历。
一般来说解决的办法有两种。
第一种是使用 Promise.all
的方式
async function test() { let arr = [3, 2, 1] await Promise.all( arr.map(async item => { const res = await fetch(item) console.log(res) }) ) console.log('end') }
这样可以生效的原因是 async
函数肯定会返回一个 Promise
对象,调用 map
以后返回值就是一个存放了 Promise
的数组了,这样我们把数组传入 Promise.all
中就可以解决问题了。但是这种方式其实并不能达成我们要的效果,如果你希望内部的 fetch
是顺序完成的,可以选择第二种方式。
另一种方法是使用 for...of
async function test() { let arr = [3, 2, 1] for (const item of arr) { const res = await fetch(item) console.log(res) } console.log('end') }
这种方式相比 Promise.all
要简洁的多,并且也可以实现开头我想要的输出顺序。
但是这时候你是否又多了一个疑问?为啥 for...of
内部就能让 await
生效呢。
因为 for...of
内部处理的机制和 forEach
不同,forEach
是直接调用回调函数,for...of
是通过迭代器的方式去遍历。
async function test() { let arr = [3, 2, 1] const iterator = arr[Symbol.iterator]() let res = iterator.next() while (!res.done) { const value = res.value const res1 = await fetch(value) console.log(res1) res = iterator.next() } console.log('end') }
以上代码等价于 for...of
,可以看成 for...of
是以上代码的语法糖。
以上就是本篇文章的全部内容了,如果你还有什么疑问欢迎在评论区与我互动。