再也不用被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 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

剑指OFFER之把数组排成最小的数(九度OJ1504)

题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个。例如输入数组{3,32,321},则打印出这三个数字能排...

19210
来自专栏深度学习自然语言处理

一文入门Python 3

Python 是一种高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python 由 Guido van Rossum 于 1989 年底在荷兰国家数...

2112
来自专栏xingoo, 一个梦想做发明家的程序员

剑指OFFER之二进制中1的个数(九度OJ1513)

题目描述: 输入一个整数,输出该数二进制表示中1的个数。其中负数用补码表示。 输入: 输入可能包含多个测试样例。 对于每个输入文件,第一行输入一个整数T,代表测...

1949
来自专栏wym

18年暑假多校赛第一场 1002

http://acm.hdu.edu.cn/showproblem.php?pid=6299

861
来自专栏程序员的知识天地

Python基础为重,成就月薪过万

傻瓜式,傻瓜式的你可以直接点开进行下载,但是智能下载这版本,有的人愿意下载别的版本所以就要用到另外的方法

772
来自专栏从零开始学 Web 前端

04 - JavaSE之异常处理

2.throw new someExpresion("错误原因"); 表示的是手动抛出异常。 **

1354
来自专栏老九学堂

【干货】2016高薪Java面试题集锦

很多小伙伴毕业在即,找工作和面试又被提上了日程,为了解决小伙伴们的燃眉之急,老九君特地为大家整理了一份最新的Java面试题集锦与答案,希望能给近期将要找工作的小...

3938
来自专栏Janti

Java基础巩固——异常

  在Java程序运行时,常常会出现一些非正常的现象,这种情况称为运行错误。根据其性质可以分为错误和异常。

731
来自专栏LuckQI

Redis初识~List命令

1072
来自专栏技术博客

C#项目代码规范

   小菜就是小菜,几个人搞出来的项目,让公司大牛稍微看了下,最后送出了惨不忍睹四个字。命名各种各样,五花八门,大写英文、小写英文、大写拼音、小写拼音、英文和拼...

1394

扫码关注云+社区

领取腾讯云代金券