资讯专栏INFORMATION COLUMN

进击的 JavaScript(六) 之 this

chemzqm / 1121人阅读

摘要:绑定为这个数组五绑定如果使用来创建对象,因为后面跟着的是构造函数,所以称它为构造器调用。为传进来的构造函数你这要看懂这步就行。

记得刚开始,我理解 this 的时候 也是云里雾里的,哈哈,希望通过这篇文章,对你有帮助吧。

关于 this 最多的说法,就是:谁调用它,this就指向谁。这话呢,不能说它错了,只能说它讲的不严谨,为什么呢?我们先来了解下 this 的几种绑定规则。

一、默认绑定

默认绑定 发生在全局环境 。

全局环境中,this 默认绑定到 window。(严格模式下一样)

console.log(this === window);
//true

"use strict";    //使用严格模式执行代码
var a = 666;
console.log(this.a)

//666


二、隐式绑定

隐式绑定 发生在 方法调用(执行)。

什么是方法呢?通常把 对象的属性值 是函数的,称为方法。

var obj = {
    fun: function(){}
}

//这里obj 对象里 的fun 属性值是个函数, 就把 这个fun 属性称为方法了。

通常,方法调用时,this 隐式绑定到其 所属的对象 上。

var a = "window";

var obj = {
    a: "obj",
    
    fun: function(){
        console.log(this.a);
    }
}

obj.fun();

//"obj"

来个难一点的:

var obj1 = {
    a: "obj1",
   
    obj2: {
        a: "obj2",
        fun: function(){
            console.log(this.a);
        }
    }
}

obj1.obj2.fun();

//"obj2"

这里的答案 跟你想的一样吗? 出现这个答案的关键 就是于,fun 函数 在作为对象方法执行时, this 绑定的是它的 所属对象,也就是 obj2 。 而非外层 的 obj1

三、隐式绑定丢失

在判断是否是隐式绑定的时候,最容易出问题的地方就是发生在 隐式绑定丢失。

隐式丢失是指被隐式绑定的函数丢失绑定对象,从而绑定到window。这种情况容易出错却又常见。(严格模式下,绑定到undefined)

隐式绑定丢失 一般 发生在 函数独立调用时。

啥是独立调用呢?就是一个简单的函数执行. 函数名的前面没有任何引导内容。

function ff(){};

ff();   //独立调用

当函数独立调用(执行)时,this 就会隐式绑定丢失,而绑定到 window 对象上。(非严格模式下)

function fun(){
    console.log(this === window);
}
fun();
//true

那么严格模式下呢?是指向 undefined 的。

function fun(){
    "use strict";    //使用严格模式执行代码
    console.log(this);
}
fun();

//undefined

考考你:

var a = "window";

var obj = {
    a: "obj",
    
    fun1: function(){
        console.log(this.a);
    }
}

var fun2 = obj.fun;

fun2();
//"window"

判断是否隐式绑定丢失的关键就在于, 判断函数 是否是哪种调用。

上面的例子,关键点就在 最后两行代码。
先看其中的第一行:

var fun2 = obj.fun;

这里把 obj 的fun 方法 赋值给了 一个变量 fun2,这里的 fun 并没有作为对象的方法来执行,因为,fun 方法这里没有执行。

其后:

fun2();

再执行 fun2,它保存着 fun1 方法,这时候执行 fun2(等于fun1) ,但是,它是独立调用。因为,没有作为对象的方法来调用。所以 this 就被指向 window了。

那么怎么解决隐式丢失问题呢?

var a = "window";

var obj = {
    a: "obj",
    
    fun: function(){
        return function(){
            console.log(this.a);
        }
    }
}

obj.fun()();

//"window"

//这里我们想要的是 obj里 a 的值,可是,隐式绑定丢失导致获取到了 window 里 a 的值。

可以基础好的已经知道答案了:

var a = "window";

var obj = {
    a: "obj",
    
    fun: function(){
        var that = this;
        return function(){
            console.log(that.a);
        }
    }
}

obj.fun()();

//"obj"

因为 fun 是作为方法调用的,所以 this 绑定到 obj 对象上,因此,我们就可以先用一个变量 that 来保存 this,然后 在内部的 匿名函数中 使用 that 就可以了。它保存着 上面 this 的绑定对象。

忽然灵机一动,想出个题目,看人家都玩出题,我也试试,哈哈:

var a = "window";

function fun(){
    var a = "fun";

    return (function(){
        return this.a;
    })()
}

fun()

//“你猜”

这道题中 有立即执行函数、this问题,哈哈,乍一看挺恶心,其实看完上面的,应该可以看出来的。

四、显示绑定

通过call()、apply()、bind()方法把 this 绑定到对象上,叫做显式绑定。对于被调用的函数来说,叫做间接调用

var a = "window"

var obj = {
    a:"obj",
}

function fun(){
    console.log(this.a);
}

fun.call(obj);
//"obj";

这里使用了 call 方法,把fun 中的 this 绑定到 obj 对象上。

javascript内置的一些函数,具有显式绑定的功能,如数组的5个迭代方法:map()、forEach()、filter()、some()、every(),以及创建对象的 Object.create() 函数(后面原型链中会细说),都可以手动绑定this。

大家可以去看下API文档,数组的这几个函数的最后一个参数,就是指定函数内 this 的绑定,如果不指定,则是window,严格模式下是undefined

var a = [1,2,3];

a.forEach(function(){
    console.log(this)
},a);

//绑定 this  为 a 这个数组

//(3) [1, 2, 3]
//(3) [1, 2, 3]
//(3) [1, 2, 3]
五、new 绑定

如果 使用 new 来创建对象,因为 后面跟着的是构造函数,所以称它为构造器调用。对于this绑定来说,称为new绑定。

想知道 构造器调用 中 this 的绑定,就要知道 new 到底做了啥了。

先来个 new 的实现。看不懂不要紧,在后面原型链那篇,还会说的。

function New(proto){  //proto 为传进来的构造函数
    var obj = {};
    obj.__proto__ = proto.prototype;

    proto.apply(obj, Array.prototype.slice.call(argument,1));
    //你这要看懂这步就行。这里把构造函数里的 this  绑定到了 新的obj 对象上,最后 返回了该新对象,作为实例对象。

    return obj;
}

所以在使用 new 来创建实例对象时,new 内部把 构造函数的 this 绑定到 返回的新对象 上了。

function Person(name){
    this.name = name;
}
var c = new Person("zdx");
c.name;

总结: this的四种绑定规则:隐式绑定、隐式绑定丢失、显式绑定和new绑定,分别对应函数的四种调用方式:方法调用、独立调用、间接调用和构造器调用。


附录:

1、关于this绑定 的优先级问题。

简单提一下吧:

new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定

2、ES6 中,箭头函数的 this 绑定。

箭头函数内的 this 绑定的 是所属的环境(函数或者对象), 它是固定不变的。

先看下上面的这个例子

var a = "window";

var obj = {
    a: "obj",
    
    fun: function(){
        return function(){
            console.log(this.a);
        }
    }
}

obj.fun()();

//"window"

上面我们使用 一个变量来保存 this 的绑定,下面我们来用 箭头函数解决问题

var a = "window";

var obj = {
    a: "obj",
    
    fun: function(){
        return () => {
            console.log(this.a);
        }
    }
}

obj.fun()();

//"obj"

实际上,箭头函数内部是没有this 的,所以,它不能使用 new 构造器调用,call显示绑定。所以它内部就是使用了一个变量来保存 箭头函数 所属环境的(函数或者对象) this

就相当于:

var a = "window";

var obj = {
    a: "obj",
    
    fun: function(){
            that = this;
            return function(){
                console.log(that.a);
            }
    }
}

obj.fun()();

//"obj"

考考你:

var a = "window";

var obj = {
    a: "obj",
    
    fun1: function(){
        return () => {
            console.log(this.a);
        }
    }
}

var fun2  = obj.fun1;

fun2()();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96444.html

相关文章

  • JS面向对象二:this/原型链/new原理

    摘要:情况没有明确作用对象的情况下,通常为全局对象例如函数的回调函数,它的就是全局对象。正因如此,机器可以作为这类对象的标志,即面向对象语言中类的概念。所以机器又被称为构造函数。原型链也就是继承链。 JS面向对象二:this/原型链/new原理 阮一峰JavaScript教程:面向对象编程 阮一峰JavaScript教程:实例对象与 new 命令 阮一峰JavaScript教程:this 关...

    anRui 评论0 收藏0
  • 进击 JavaScript(四) 闭包

    摘要:此时产生了闭包。导致,函数的活动对象没有被销毁。是不是跟你想的不一样其实,这个例子重点就在函数上,这个函数的第一个参数接受一个函数作为回调函数,这个回调函数并不会立即执行,它会在当前代码执行完,并在给定的时间后执行。 上一节说了执行上下文,这节咱们就乘胜追击来搞搞闭包!头疼的东西让你不再头疼! 一、函数也是引用类型的。 function f(){ console.log(not cha...

    Anleb 评论0 收藏0
  • 进击JavaScript(四)原型与原型链

    摘要:每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能,因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象,我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。 本文您将看到以下内容: 传统构造函数的问题 一些相关概念 认识原型 构造、原型、实例三角结构图 对象的原型链 函数的构造函数Function 一句话说明什么...

    XBaron 评论0 收藏0
  • 前端进击巨人():知否知否,须知this

    摘要:有关函数柯里化的详解,请回阅前端进击的巨人五学会函数柯里化。构造函数中的通过操作符可以实现对函数的构造调用。在了解构造函数中的前,有必要先了解下实例化对象的过程。 showImg(https://segmentfault.com/img/bVburMp?w=800&h=600); 常见this的误解 指向函数自身(源于this英文意思的误解) 指向函数的词法作用域(部分情况) th...

    Andrman 评论0 收藏0
  • 进击 JavaScript(五) 立即执行函数与闭包

    摘要:匿名函数是不能单独写的,所以就提不上立即执行了。六立即执行函数在闭包中的应用立即执行函数能配合闭包保存状态。来看下上节内容中闭包的例子现在,我们来利用立即执行函数来简化它第一个匿名函数执行完毕后,返回了第二个匿名函数。 前面的闭包中,提到与闭包相似的立即执行函数,感觉两者还是比较容易弄混吧,严格来说(因为犀牛书和高程对闭包的定义不同),立即执行函数并不属于闭包,它不满足闭包的三个条件。...

    vincent_xyb 评论0 收藏0

发表评论

0条评论

chemzqm

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<