zoukankan      html  css  js  c++  java
  • js 5.14 this的引用

    5.14.1、this引用 的规则

    在最外层的代码中,this引用的是全局对象

    在函数内,this引用根据函数调用方式不同而有所不同

    函数的调用方式this引用的引用对象

    构造函数调用 所生成的对象
    方法调用 接收方对象
    apply或是call调用 有apply 或call的参数指定对象
    其他的方式的调用 对象全局

    通过点运算符或中括号运算符调用对象的方法时,在运算符左侧所指定对象
    下面方法和接受对象的具体例子


    var obj={
    x:3,
    doit:function(){
    console.log("method is called"+this.x);
    }
    }
    obj.doit();//method is called 3
    obj['doit']();//method is called 3

    首先是将对象的引用赋值给了变量obj。这个对象有两个属性,属性x的值是数值3,属性doit的值是一个函数,将该函数称为方法doit
    可以通过点运算符或中括号运算符对obj调用方法doit。这时方法调用的目标的对象被称为接收方对象(也就是obj引用的对象是一个接收方对象)。被调用的方法内引用改接受方对象。

    5.14.2 this引用的注意点接上面的例子继续


    var fn=obj.doit;   //将obj.doit引用的Function对象赋值给全局变量
    fn();                    //函数内this引用了全局对象
    var x=5;             //确认this 引用全局对象
    fn()  ;
    var obj2={x:4,doit:fn};//将obj的方法(function对象的引用)赋值给了另一个对象obj2的属性
    obj2.doit()//方法内的this引用对象obj2

    var obj={
    x:15,
    doit:function(){
    console.log(this);
    console.log("doit is called"+this.x);
    this.doit2();      //如果写成doit(),则会在全局中搜索doit,则会报错  doit2 is not defined
    },
    doit2:function(){
    console.log("doit2 is called"+this.x);

    }


    }
    obj.doit();

    ////var x=2;
    function f(){
    var x=1;
    console.log(x);
    console.log(this,this.x);
    }
    f();

    打印一下this指向this指向window未定义,var x=2打开在打印this.x是2

    在function对象中包含apply,call,bind这三种方法,通过他们调用的函数的this引用,可以指向特定的对象也就是说可以理解位
    显示的指定接收对象

    function f(){
    console.log(this.x);
    }
    var obj={x:4};
    f.apply(obj) //通过apply调用函数f。函数内this引用了对象obj
    f.call(obj) //通过call调用函数f。函数内this引用了对象obj
    console.log(f.bind());//返回一个函数所以bind,因此后面还需要()来进行调用才可以。
    f.bind(obj)()
    运行结果:
    4
    4

    var m={
    x:3,
    doit:function(){
    console.log('method is called'+this.x);
    }
    }
    var obj2={x:5};
    m.doit.apply(obj2);
    运行结果:
    method is called 5

    对function对象f使用apply或call方法就能调用该函数。不考虑函数内的this引用的话,这和f()的用法是一样的。
    两者的区别再调用的函数(方法)内的this的引用,this引用的是作为apply/call的第一个参数被传递的对象。而apple与call之间的不同之处在于两者在于其他的参数的传递方式。对于apply来说,剩余的参数将通过数组来传递,而call是直接按原样传递形参。请通过下面的具体的例子来了解这一差异。

    function f(a,b){
    console.log('this.x='+this.x+',a='+a+',b='+b);
    }
    f.apply({x:4},[1,2]); //作为第二个参数的数列中的元素都是函数f的参数
    f.call({x:5},1,2) //从第2个参数起的参数都是函数f的参数

    运行结果:
    this.x=4,a=1,b=2
    this.x=5,a=1,b=2

    在一个例子:

    var m={
    x:3,
    doit:function(a,b){
    console.log('method is called'+this.x+',a='+a+',b='+b);
    }
    }
    var obj2={x:5};
    m.doit.call(obj2,1,2);
    m.doit.apply(obj2,[1,2]);
    console.log(m.doit.bind());//但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。
    m.doit.bind(obj2,1,2)();
    m.doit.bind(obj2)(1,2);

  • 相关阅读:
    php数据类型
    php输出语句
    php学习知识点框架
    php变量
    php语法
    php 的开发工具
    搭建php环境的几种方法
    redis 的单机安装
    三、其他主机安装zabbix-agent加入到zabbix
    内核参数优化
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/5347354.html
Copyright © 2011-2022 走看看