最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • this指向问题

    正文概述 掘金(_jiang)   2021-08-22   548

    this指向的方式

    ① 在普通函数中,this指向window
    ② 在构造函数中,this指向创建的对象
    ③ 在方法声明中,this指向调用者
    ④ 在定时器中, this指向window
    ⑤ 在事件中,this 指向事件源
    
    //this指向window
    function foo() {
    console.log(this.a)
    }
    var a = 1foo()   
    
    //this指向obj,调用foo的对象上
    const obj = {
    a: 2,
    foo: foo
    }
    obj.foo()
    
    //this指向new这个函数上,即c
    const c = new foo()
    
    //箭头函数的this指向定义这个函数的位置,bind,apply无效,此时this指向window
    function a() {
        return () => {
            return () => {
                console.log(this)
            }
        }}
    }
    

    改变this指向

    1.使用bind

    var foo = {
    x: 3
    }
    var bar = function(){
    console.log(this.x);
    }
    bar(); // undefined
    
    var boundFunc = bar.bind(foo); //使用bind将this绑定到window上,可以访问到foo
    boundFunc(); // 3
    

    2.let self = this
    3.立即执行函数(function(j) {})(i)

    bind、apply、call

    在说区别之前还是先总结一下三者的相似之处:

    相似之处

    1、都是用来改变函数的this对象的指向的。
    2、第一个参数都是this要指向的对象。
    3、都可以利用后续参数传参。

    区别

    1.call、apply与bind都用于改变this绑定,但call、apply在改变this指向的同时还会执行函数,而bind在改变this后是返回一个全新的boundFcuntion绑定函数,这也是为什么上方例子中bind后还加了一对括号 ()的原因。

    2.bind属于硬绑定,返回的 boundFunction 的 this 指向无法再次通过bind、apply或 call 修改;call与apply的绑定只适用当前调用,调用完就没了,下次要用还得再次绑。

    3.call与apply功能完全相同,唯一不同的是call方法传递函数调用形参是以散列形式,而apply方法的形参是一个数组。在传参的情况下,call的性能要高于apply,因为apply在执行时还要多一步解析数组。

    wx.say.bind(this) 不能立即执行,无效,必须wx.say.bind(this)("aaa"),参数置后
    wx.say.call(this,"aaa","bbb") 立即执行
    wx.say.apply(this,["aaa","bbb"]) 立即执行,参数为数组

    手写call,apply,bind

    Function.prototype.myCall = 
        function (ctx) { 
        ctx = ctx || window; 
        ctx.fn = this; 
        let args = Array.from(arguments).slice(1); 
        let res = ctx.fn(...args); 
        delete ctx.fn; 
        return res;
    }; 
    Function.prototype.myApply = function (ctx) { 
        ctx = ctx || window; 
        ctx.fn = this; 
        let args = Array.from(arguments[1]); 
        let res = ctx.fn(...args); 
        delete ctx.fn; 
        return res; 
    };
    Function.prototype.myBind = function (ctx) { 
        let args = Array.from(arguments).slice(1); 
        let that = this; 
        return function (...oargs) 
            { 
                return that.apply(ctx, [...args, ...oargs]); 
            };
     };
    

    起源地下载网 » this指向问题

    常见问题FAQ

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

    发表评论

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

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

    联系作者

    请选择支付方式

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