• javascript--this机制


      this在javascript中很常见同时也是种比较复杂的机制,正确地了解this并且学会正确使用,可以让我们写出更高效、优雅的代码。

      this是在代码运行时进行绑定的,并不在编写时,它的上下文环境取决于韩式调用时的各种条件。this的绑定和函数声明的位置没有任何的关系,只取决于函数的调用方式。

    this的四种绑定规则

    1、默认绑定

     function foo(){
            console.log(this.a);  
       }
       var a = 2;
       foo();           //2
    

    调用foo()时,内部的this会指向全局对象,应用了this的默认绑定

    但是,如果实在严格模式下的话,this就是指向了undefined了

    2、隐式绑定

    function foo(){
            console.log(this.a);  
       }
    
       var obj = {
            a : '3',
            foo : foo      
       }
       obj.foo();      //3
    

    声明对象obj,属性foo是引用了函数foo,当obj.foo()调用时,隐式绑定规则会把函数调用的this绑定到这个obj上下文对象

    3、显式绑定

    function foo(){
            console.log(this.a);  
       }
    
        var obj2 = {
            a : 4
        }
    
        foo.call(obj2);    //4
    

    通过foo.call()可以在调用foo时强制把它的this绑定到obj上

    4、new绑定

    function baz(a){
        this.a = a
    }
    var bar = new baz(5);
    console.log(bar.a);
    

    使用new关键字调用函数会发生什么操作在上篇博文也有介绍到,构造出一个新对象并把它绑定到baz调用中的this上

    判断this规则

    我们可以按照以下的规则来判断this是应用了哪个规则:

    1、函数是否在new中调用?是的话this绑定的是新创建对象

    var bar = new foo();

    2、函数是否通过call、apply显式绑定?是的话this绑定了指定对象

    foo.call(obj);

    3、函数是否在某个上下文调用隐式绑定,是的话this绑定那个上下文对象

    obj.foo()

    4、如果都不是的话,this则应用了默认绑定

    绑定例外

    当我们把null和undefined作为this的绑定对象传入call、apply时,这些值会被忽略,实际上是应用了默认绑定

    function foo(){
            console.log(this.a);  
       }
       var a = 2;
       foo.call(null);           //2
    

      

    如果文中有出现错误的地方,欢迎大家指正

  • 相关阅读:
    JavaScript -- 条件语句和循环语句
    xpath的|
    Pythonic
    4k图片爬取+中文乱码
    xpath-房价爬取
    (.*?)实验室
    模块的循环导入
    bs4-爬取小说
    糗图-图片爬取
    re实战记录
  • 原文地址:https://www.cnblogs.com/weapon-x/p/5335125.html
Copyright © 2020-2023  润新知