javascript 跳跃式前进 (5) - 深入浅出 this[六种模式]

2024-02-22 10:20:05 浏览数 (1)

版权声明:保留原博文链接及作者的情况下,请尽情转载吧!!!

问this为何物,直教人苦逼不已

this是面向对象编程中的一个概念,一般指向当前方法调用所在的对象,但在JS中灵活很多,为什么这么说呢?那是因为:

  • this是运行时绑定而非编写时绑定
  • this的绑定和函数声明的位置木有任何关系,执行上下文取决于函数调用时方式
  • this既不指向函数自身也不指向词法作用域。

So… 谁调用这个函数或方法,this关键字就指向谁这话是并不是完全准确的

this应当如何确定!

说到这个,就不得不说JS中this的绑定额;JS中有五种绑定模式及一种特殊绑定模式【ES6的箭头函数】;

  • 默认绑定 默认绑定的this值取决于严格模式非严格模式
代码语言:javascript复制
var a = 10086;


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



function test2(){
   "use strict"
    console.log(this.a); 
}
test2();
代码语言:javascript复制
    function test3(a){
       this.a = a;
       console.log(this.a); 
       console.log(a);
    }
    var testv3 = new test3(10086); 
  • 显式绑定(硬绑定) – call , apply , bind
    • call和apply的区域在于传参的方式不同,但是作用基本一致
    • bind是es5的绑定方法,绑定后this无法改变,上面亦是如此
代码语言:javascript复制
    var obj = {a:2}
    function test4(){
        console.log(this.a)
    }
    var testv4 = test4.call(obj); 


    
    function test5(){
     console.log(this.a)
    }
    var obj2 = {a:10086}
    var testv7 = test7.bind(obj2)
    testv7() 
  • 隐式绑定 隐式绑定是要看是否有上下文对象,调用的时候是否给某个对象拥有或者包含;则该this绑定到该对象中。
代码语言:javascript复制
    function test6(){
       console.log(this.a)
    }

    var obj3 = {
      a:10086,
      test6:test6
    }

    obj3.test6() 


    
    var obj1 = {a:789 , obj2:obj2}
     var obj2 = { a:456, test8:test8}
     obj1.obj2.test6(); 

总结

  1. 若是把undefined,null作为this绑定对象参数传入call,apply,bind,会采用默认绑定规则,而参数依旧传入;比如你有一个数组想要依次分割传入一个函数中,apply就可以做到;当然,ES6中的拓展运算符也可以做到...【非常实用的一个操作符】,后续再写吧
  2. 在未来ES7 中,有一个关于 bind 语法 的提议,提议将:: 作为一个新的绑定操作符,该操作符会将左值和右值(一个函数)进行绑定;若是能开展,this在一些情况下都可以不用写了

0 人点赞