js中this的四种调用模式详解

JSthis的四种调用模式主要分为方法调用模式、函数调用模式、构造器调用模式和(apply、call、bind)调用模式。

第一种:方法调用模式 (也就是用.调用的)this就是这个对象本身

当一个函数被保存为对象的一个属性时,我们称它为一个方法,当一个方法被调用时,this被绑定到该对象,如果一个调用表达式包含一个属性表达式(即一个.点表达式或者[subscript]下标表达式)那么它被当做一个方法调用。

    var myObject = {
        value:0;
        increment:function(inc){
            this.value + = typeof inc === 'number'?inc:1;
        }
    }
    myObject.increment();
    document.writeln(myObject.value);//1
    myObject.increment(2);
    document.writen(myObject.value;)

方法可以使用this去访问对象,所以它能从对象中取得或修改该对象,this到对象的绑定发生在调用它的时候,这个超级“迟绑定”(very later binding)使用函数可以对this高度复用,通过this可取得它们所属对象的上下文的方法称为公共方法。

第二种:函数调用模式


当函数并非一个对象的属性时,那么它被当做一个函数来调用:

var sum = add(3,4);

当函数以些模式调用时,this被绑定到全局对象,这是语言设计上的一个错误,如果语言设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this对象,这个错误设计的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权,有一个很容易的解决办法如果该方法定义一个变量并给它赋值为this,那么内部函数就可以通过这个变量来访问到this。

    //给myObject增加一个double方法
    myObject.double = function(){
        that = this; 
        var helper = function(){
            that.value = add(that.value,that.value);
        }
        helper();以函数的形式来调用helper
    }
    //以方法的形式来调用double
    myObject.double();
    document.wtiten(myObject.getValue());//6

第三种:构造函数调用模式

    var Class = function(){
        this.value = 100;
    }
    var class = new Class();
    console.log(class.value); //100

我们通过new关键字来调用构造函数,此时this会绑定在该新对象上(也就是这个实例对象上)

第四种:apply和call以及bind的调用模式:指定绑定对象

    var myObject = {value:100};
    var foo = function(){
        console.log(this);
    };
    foo(); //global
    foo.apply(myObject);//{value:100}
    foo.call(myObject);//{value:100}
    var newFoo = foo.bind(myObject);
    newFoo(); //{value:100}

apply()方法接受两个参数第一个是函数运行时的作用域,另一个是参数的数组(arguments)

call()方法第一个参数与apply是一样的,第二个参数需要一个个列举出来

call方法更接近我们平时调用函数,而apply需要我们传递 Array形式的数组做为参数,它们是可以相互转换的。

资源下载
下载价格10 积分
此资源购买后10天内可下载。1、如果您遇到版本没有及时更新,或者无法下载(请勿重复支付)等问题,请联系客服QQ:125252828 微信号:dobunkan
2、注意:本站资源永久免费更新,标题带“已汉化”字样的属于汉化过的!!!
3、如果您购买前没有注册账户,请自行保存网盘链接,方便后续下载更新
4、1积分等于1元。购买单个资源点立即支付即可下载,无需注册会员。
5、本站支持免登陆,点立即支付,支付成功就就可以自动下载文件了(因部分插件和模板没来得及汉化,如果需要汉化版,请先咨询清楚再买!)。
6、如果不会安装的,或者不会使用的以及二次开发需求,费用另外计算,详情请咨询客服!
7、因程序具备可复制传播性质,所以,一经兑换,不退还积分,购买时请提前知晓!
常见问题
Wordpress模板插件上传安装提示错误怎么办?
本站在打包插件或者模板的时候,一般会将官方文档、官方申明、已经其他文件一起打包,因此,大部分插件模板在安装前需要解压缩。
购买后无法下载或者提取码错误怎么办?
请联系客服QQ:125252828 或者微信:dobunkan,由于骚扰信息过多,加好友时请说明原由!
小白建站啥都不会怎么办?
请与客服联系,沟通具体的技术支持。由于搭建环境、调试程序需要花费一些时间,可能会收取一些费用。
怎样催促站长更新?
直接微信或者QQ联系本站客服,提供最新版本号以及软件名称,客服会在第一时间更新,如果超过2-3年未更新的请先联系站长后再确认是否需要下载。
为什么打开链接看不到最新版本?
因为网盘默认是按名称排序,最新版本不一定会排在第一个,请打开链接后点击右上角的“修改日期”,这时候更新列表就会按更新日期排序了。
原文链接:https://www.dobunkan.com/server/103,转载请注明出处。
0

评论1

请先
  1. 这javacript和c语言好像啊,似曾相识的感觉。
    zhangfei 2019-09-23 0
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

学课技术网欢迎您的加入!