前端编程对于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

再也不用被this苦恼了的更多相关文章

  1. 妈妈再也不用担心别人问我是否真正用过redis了

    1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...

  2. 有了这个,再也不用每次连新机器都要设置secure crt属性了

    我连服务器用的是secure crt,每次ssh新服务器的时候都得手动设置字符编码和背景颜色,今天问了旁边的开发原来可以全局设置,以后连服务器的时候就再也不用手动设置相关属性了.步骤如下: 一开始点击 ...

  3. 锋利的js之妈妈再也不用担心我找错钱了

    用js实现收银功能. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  4. 【阿里云产品公测】离线归档OAS,再也不用担心备份空间了

    [阿里云产品公测]离线归档OAS,再也不用担心备份空间了 作者:阿里云用户莫须有3i 1 起步  1.1 初识OAS  啥是OAS,请看官方说明: 引用: 开放归档服务(Open Archive Se ...

  5. 学会这个删库再也不用跑路了~ --技术流ken

    前言 相信每一个学IT的人或多或少都听说过从删库到跑路这个梗~下图也是在各种交流群屡禁不止,新人听着也是瑟瑟发抖. 人们茶余饭后,街头巷角难免要问... 下面技术流ken就教给各位新手们一招删库再也不 ...

  6. 有了 tldr,妈妈再也不用担心我记不住命令了

    引言 有一次我在培训时说「程序员要善于使用 Terminal 以提高开发效率」,一位程序员反驳道:「这是 21 世纪,我们为什么要用落后的命令行,而不是先进的 GUI?」 是的,在一些人眼里,这个黑黑 ...

  7. 妈妈再也不用担心我使用git了

    妈妈再也不用担心我使用git了 Dec 29, 2014 git git由于其灵活,速度快,离线工作等特点而倍受青睐,下面一步步来总结下git的基本命令和常用操作. 安装msysgit 下载地址:ms ...

  8. 利用CH341A编程器刷新BIOS,恢复BIOS,妈妈再也不用担心BIOS刷坏了

    前几天,修电脑主析就捣鼓刷BIOS,结果刷完黑屏开不了机,立刻意识到完了,BIOS刷错了.就从网上查资料,各种方法试了个遍,什么用处都没有.终于功夫不负有心人,找到了编码器,知道了怎么用.下面看看具体 ...

  9. python爬虫07 | 有了 BeautifulSoup ,妈妈再也不用担心我的正则表达式了

    我们上次做了 你的第一个爬虫,爬取当当网 Top 500 本五星好评书籍 有些朋友觉得 利用正则表达式去提取信息 太特么麻烦了 有没有什么别的方式 更方便过滤我们想要的内容啊 emmmm 你还别说 还 ...

随机推荐

  1. Unity3D编辑器扩展(一)——定义自己的菜单按钮

    Unity3D 引擎的编辑器拥有很强的扩展性,用的好可以帮我们省很多事情.在这里记录下如何去扩展 Unity3D 的编辑器,定制属于我们自己的开发环境. 本篇主要讲解在 Unity3D 引擎的各个窗口 ...

  2. oracle 恢复table删除数据 恢复package(使用闪回)

    好久没写东西了,今天写一篇凑个数吧,来公司一年多了,感觉自己到了一个小瓶颈期了. 以前每天很多新东西,都是忙着学,感觉没时间写博客总结一下,大部分都是写笔记,现在又是没东西可以写,每天干着95%都是重 ...

  3. JDBC&Oracle启动

    [Wed Apr 26 2017 16:05:11 GMT+0800]PLSQL Developer连接远程oracle配置(本地不安装客户端).在windows机器上不想安装oracle或者orac ...

  4. BP神经网络 详解模板

    %原始数据输入 P=[ - 6.142 - 27.5 5.068 - 31.7 5.196 - 34.1 6.362 - 31.54 6.472 - 30.17 6.578 - 29.53 6.351 ...

  5. 《Serverless架构-无服务单页应用开发》读后感

    本书的作者是[美]Ben Rady,译者郑赞美.简传挺,书中作者详细的介绍了如何使用html.js以及amazon提供的诸多云服务(Simple Storage Service(S3).Cognito ...

  6. php中连接mysql数据库的第一步操作

    <?phperror_reporting(E_ALL ^ E_DEPRECATED);//设置报警级别人$mylink = mysql_connect("localhost" ...

  7. EF学习笔记(八):更新关联数据

    学习笔记主目录链接:ASP.NET MVC5 及 EF6 学习笔记 - (目录整理) 上一篇链接:EF学习笔记(七):读取关联数据 本篇原文链接:Updating Related Data 本篇主要考 ...

  8. numpy&matplotlib读书笔记

    Matplotlib matplotlib是Python优秀的数据可视化第三方库 matplotlib库的效果可参考 http://matplotlib.org/gallery.html matplo ...

  9. redis启动出现错误creating server tcp listening socket 127.0.0.1:6379: bind No error

    creating server tcp listening socket 127.0.0.1:6379: bind No error 的解决方案如下按顺序输入如下命令就可以连接成功 1. redis- ...

  10. EBS API及接口清单

    https://www.cnblogs.com/lizicheng/p/9521742.html 模块 应用场景 类型 API/接口 AP 付款核销 API ap_pay_invoice_pkg.ap ...