最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • this到底指向什么?记住这4点就够了!

    正文概述 掘金(狮子哇)   2021-06-21   452

    本文主要在于掌握this在JavaScript的指向,了解this是在什么时候确定的,谁决定了this的指向。

    4大规则

    优先级权重:依次从上到下,权重值从小到大

    1. (优先级最小)默认绑定规则: console.log( this === window ); // true
    2. (优先级次于后两项)隐式绑定规则:谁调用就指向谁;(隐式丢失)。
    3. (优先级次于new绑定)显示绑定规则:call,apply,bind。
    4. (优先级最大)new 绑定规则。

    this 的默认绑定规则

    全局的this默认指向window,如果开启严格模式的话,则this指向undefined。

    • 例子1:
    console.log(this === window) // true 严格模式下全局的this为undefined
    console.log({} === {}) // false
    1. this和window之所以输出的是true,是因为他们指向的是同一个地址;
    2. 两个对象为什么不相等呢,主要是因为,对象对比的是指针地址,每声明一个对象就开辟一个空间生成一个指针地址指向存数据的地方。

    this 的隐式绑定规则

    如果方法是通过某个对象点的方法调用的话,则this指向调用的对象,如果是直接调用(自主调用)的话,则this指向window.

    • 例子1:
    function test(){
        console.log(this === window); // true
    }
    test() // 可以理解为window.test();
    1. 函数的独立调用,其实就是相当于window.xxx()的方式调用,因为全局声明的函数都是默认挂载到window上的,所以this也默认指向window。

    • 例子2:

    var obj = {
        a: 2,
        foo: function(){
            console.log(this); // obj
            function test(){
                console.log(this); // window
            }
            test();
        }
    }
    obj.foo();
    1. 因为foo是obj调用,所以foo函数的this应该指向调用他的对象,所以内部打印出来的this为obj;
    2. 而test虽然是在foo的内部调用,但是属于直接调用所以this依旧指向window。

    this 的显示绑定规则

    如果通过call,apply,bind强制更改this指向,则this指向方法传入的第一个参数。

    • 例子1

    var name = 'test1'
    var obj = {
        name: 'test2'
    }
    function fn(){
        console.log(this.name);
    }
    var bindFn = fn.bind(obj);
    bindFn() // test2
    fn.call(obj) // test2
    fn.apply(obj) // test2
    1. 因为使用了call,apply,bind强行更改了this指向,所以this指向传入的第一个参数(obj)。

    this 的new绑定

    1. 如果构造函数内部没有返回引用类型变量,则构造函数内部会创建一个新的对象,this就是这个对象;
    2. 如果构造函数内部返回了引用类型变量,则this为返回的这个对象。

    • 例子1:

    function Body(){
        console.log(this); // Body {}
    }
    new Body()
    function Person(){
      console.log(this); // {name: "test"}
      return {
        name: 'test'
      }
    }
    new Person()
    1. 因为Body内部没有返回引用类型的数据所以this指向新创建的对象,Person构造函数内部返回了一个对象,所以this则指向返回的对象。

    总结:

    在js中函数定义时,this的指向是不确定的,只有在执行的时候,才能确定this的指向,所以可以总结成一句话,“this指向是根据执行调用时的动态上下文来决定的”


    起源地下载网 » this到底指向什么?记住这4点就够了!

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元