专栏首页ccylovehs再也不用被this苦恼了

再也不用被this苦恼了

前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐。对于理解this似懂非懂的同学可以借鉴一波

1.this描述

this指的是当前执行环境上下文,只要牢牢抓住这一点就能找到this的根源,this.function、this.property就能准确定位实际对象。

2.this绑定规则

window 绑定

function sayAge () {
    console.log(this.age);
}
var  user = {
    name: 'ccy',
    age: 18
}
sayAge()

输出结果为undefined,仔细思考当前函数执行的上下文,其实等价于window.sayAge()

  this默认绑定在window全局对象上

隐式绑定

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

这段代码this绑定到了obj对象,当函数引用有上下文对象(context)时,隐式绑定规则会把this绑定到这个上下文对象

  再看看隐式丢失问题

var bar=obj.foo;
bar();

  输出undefined,因为此时执行上下文为全局对象,没有a属性

显式绑定

  在分析隐式绑定时,必须将函数作为对象的属性,从而将此对象绑定在函数的执行上下文,但想想是不是很麻烦,显示绑定可解决此问题。

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

  用函数原型属性 call、apply、bind都可以实现

Function.prototype.call=function(ctx,arg1,arg2,/*...*/argN){native code}

Function.prototype.apply=function(ctx,arrys){native code}

Function.prototype.bind=function(ctx){native code}

  当然这些函数原型属性都可以重写以实现自己的需求,call和apply的区别仅仅在于第二个参数开始apply传递数组,call是将参数一个个传递,call与bind的区别在于bind不能立即执行。

new 绑定

  其实每当用 new 调用函数时,JavaScript 解释器都会在底层创建一个全新的对象并把这个对象当做 this。如果用 new 调用一个函数,this 会自然地引用解释器创建的新对象。

function User (name, age) {
      /*
        JavaScript 会在底层创建一个新对象 `this`,它会代理不在     User 原型链上的属性。
        如果一个函数用 new 关键字调用,this 就会指向解释器创建的新对象。
      */
      this.name = name
      this.age = age
    }
    var me = new User('ccy', 18)

如果要判断一个运行中函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

参考资料

https://juejin.im/post/5b9f176b6fb9a05d3827d03f

https://www.cnblogs.com/buzhiqianduan/p/7718313.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript实现iphone时钟

    http://www.w3school.com.cn/tags/html_ref_canvas.asp

    Jack Chen
  • Vue实现电商网站项目

    vue-router路由管理/src/views/目录下的vue组件进行设置,router-views挂载所有路由,登录界面与商品列表页面之间header做隐藏...

    Jack Chen
  • JavaScript模拟自由落体

    但是实际呈现的效果却不尽人意,应该是反弹位移计算有误,经反复思考无果(若哪位大拿有更好的实现方式欢迎评论告知)

    Jack Chen
  • Canvas制作的下雨动画

    在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的。就研究了下,这里来分享下,实现技巧。效果可以见下面的链接。

    前端博客 : alili.tech
  • 【 图形游戏 Tetris 】原生 JavaScript 做小游戏

    俄罗斯方块 (俄罗斯开发经典游戏) 游戏简介 《俄罗斯方块》(Tetris, 俄文:Тетрис)是一款由俄罗斯人阿列克谢·帕基特诺夫于1984年6月发明的休闲...

    Levi.Ackermann
  • vue轮播组件--不插电手动粘贴版

    轮播的原理是每一帧都选出一个当前元素,前一个元素,后一个元素然后排成一行,最后改变这三个元素的translate来触发css3的transition进行动画,当...

    Ganother
  • Flutter之Android层面源码分析(一)

    学习Flutter过程中,先撸了一遍Flutter,写了个仿boss直聘的demo, github地址:flutter_boss. 写完之后其实比较迷茫,and...

    kimihe
  • 俄罗斯方块之心(cocos2d-js+html5)

    就截取了两张图,有兴趣的朋友可以去微博上查阅视频版。 微博地址: http://video.weibo.com/show?fid=1034:42671171...

    李小白是一只喵
  • 实现一个同步的RenderApplication

    Nebula3 Sep2008 SDK之后渲染改成异步的了, 对于想直接操作内部API接口的我来说, 没法直接下手了

    逍遥剑客
  • TypeScript 函数中的 this 参数

    从 TypeScript 2.0 开始,在函数和方法中我们可以声明 this 的类型,实际使用起来也很简单,比如:

    阿宝哥

扫码关注云+社区

领取腾讯云代金券