阅读 697

走心大白话JavaScript教程(一)理解JS中this指向的小技巧

JS大法好,JS在手,天下我有,信JS,得永生。

这个系列的教程我一开始是写在github上的,
但是觉得放到掘金来可以让更多需要的人看到,
就搬到掘金专栏上啦,
如果觉得本教程对你有帮助,请点这里去github上给我一颗Star~
教程目录也在github上哈~

本着对技术负责的态度,任何纠正/疑问,尽管提出,我会及时修正/回答。

一定要把每个例子代码都拷贝到你的运行环境中边看结果边理解,不然学习效果减半,或者没效果。

闲话说太多了~下面开始第一篇:

理解JS中this指向的小技巧

在看他人写的js文件时,会看到许多this,
对this不熟悉的人很容易蒙圈,这里就说明如何用最简单的方法去找this指向谁。

切记!这里说的找“点”大法中的“.”,都是在调用的语句里找,本教程的全局对象为window!


1、找“点”大法:你找不到“.”的函数调用,this指向一般是window:

声明
function foo(){
  console.log(this)
}复制代码
调用
foo();    //自己去运行代码看this指向谁
//脑补:
window.foo();   //自己去运行代码看this指向谁复制代码
解读
不用怀疑,也不用犹豫,找不到任何“.”,this指向window。
以后见到直接调用的foo,自动脑补成window.foo(),因为在这种情况下,这两种写法是一样的。复制代码
㈠当函数/匿名函数作为参数时,你是找不到“.”的,这种情况下,函数内部的this指向window。
声明&调用
function foo(callback){
    callback(); //调用其实在这里,你是找不到“.”的
}
foo(function(){
    console.log(this);  //自己去运行代码看this指向谁
})复制代码
解读
这个例子就是,匿名函数内部打印了this,它作为参数,内部的this指向window复制代码


2、找“点”大法:有“.”的函数调用,this指向一般是最后一个“.”左侧的那个对象:

2-1、调用语句里只能找到一个“.”:
声明
var bar = {name:'我是bar'};
bar.foo = function(){
  console.log(this)
};复制代码
调用
bar.foo();  //自己去运行代码看this指向谁复制代码
解读
这个例子,我们找到了“.”的存在,“.”左侧是bar,指向是bar。复制代码
2-2、调用语句里能找到多个“.”:
声明
var obj = {name:'我是obj'};
obj.bar = {name:'我是bar'};
obj.bar.foo = function(){
  console.log(this)
};复制代码
调用
obj.bar.foo();  //自己去运行代码看this指向谁复制代码
解读
这个例子,我们找到了俩“.”,最后一个“.”左侧的对象是bar,那么this指向就是bar。复制代码
㈡如果发现你找到的“.”左侧是prototype,那么再往左找一个“.”,这个“.”左侧的对象是this指向。原理在不得不提的原型/原型链中给出。


3、面向对象中的this:

对面向对象不够了解的同学,请尽量读懂不得不提的原型/原型链

阅读本文,就先专注于找this指向吧!

声明
function Foo(){
    this.name = 'hahaha'
    console.log(this);
}
Foo.prototype.bar = function(){
    console.log(this);
}
Foo.prototype.funcWithParam = function(fn){
    fn();
}复制代码
调用
Foo();  //自己去运行代码看this指向谁

Foo.prototype.bar();  //自己去运行代码看this指向谁

var foo = new Foo(); //自己去运行代码看this指向谁

foo.name = '我是foo';

foo.bar(); //自己去运行代码看this指向谁

foo.funcWithParam(function(){
    console.log(this);  //自己去运行代码看this指向谁
});复制代码
解读
当Foo()时,Foo被当做[普通函数],那么遵循找“点”大法,Foo内部的this是指向window的;

当Foo.prototype.bar()时,Foo还是被当做[普通函数],遵循找“点”大法,按照2-2,发现找到了prototype,转而遵循㈡,再向左找,发现this指向Foo;

当new Foo()时,Foo作为[构造函数]被实例化,Foo内部的this指向实例化后的Foo,也就是我声明的foo;

当foo.bar时,遵循找“点”大法,按照2-1,发现this指向foo;

当foo.funcWithParam(匿名函数)时,匿名函数前没有“.”,匿名函数作为参数,所以遵循㈠,发现其内部this指向window复制代码


4、call和apply会改变this指向,在巧妙理解call、apply单独详解。


小结:

  • 找不到“.”的函数调用,其内部的this一般指向window象;
  • 找得到“.”的函数调用,其内部的this一般指向最后一个“.”左侧的那个对象,如果左侧是prototype,再向左找一个;
  • 明确区分函数是[构造函数]还是[普通函数],[构造函数]内的this指向实例化后的对象;
  • 函数作为参数传递,被调用时其内部的this一般指向window。
  • call和apply会改变this指向,参阅巧妙理解call、apply
  • ES6/7的箭头函数也会影响this指向,这个很简单,我就不多讲啦~

一句话来说,就是“谁调的我(普通函数),我内部的this就指向谁;new我一下(构造函数),我内部的this就指向我的实例化”

PS:
欢迎转载,需要注明原址。
教程之间紧密联系,不懂的地方,请好好看下全系列教程目录
有没有你不懂的那个关键字在里面。
如果帮到你,别忘了给我一颗Star~

关注下面的标签,发现更多相似文章
评论