前端编程对于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. EmEditor注册码

    Emeditor 是一款非常好用的文本编辑器 Emeditor 注册码 姓 名:ttrar.com 序 列 号:DKAZQ-R9TYP-5SM2A-9Z8KD-3E2RK 姓 名:whyida 序 列 ...

  2. WBS分析

    我们的产品是2048是一个基于安卓平台开发的小游戏,WBS如下: 进一步优化版本: 小组最终版本:

  3. 携带cookie的跨域访问

    携带cookie的跨域解决方案 有的时候访问后台的请求需要携带cookie以供后台分析,比如jQuery的ajax请求: $.ajax({ url: a_cross_domain_url, xhrFi ...

  4. Exp4 恶意代码分析 ——20164325王晓蕊

    1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套件 ...

  5. webapi使用swagger出现“Cannot read property 'parameters' of null”

    前端时间在webapi项目使用swagger来提供接口文档及测试工具,按网上方法(http://wmpratt.com/swagger-and-asp-net-web-api-part-1)配置好之后 ...

  6. PMP:11.项目采购管理

    项目采购管理包括从项目团队外部采购或获取所需产品.服务或成果的各个过程.  项目采购管理包括编制和管理协议所需的管理和控制过程,例如,合同.订购单.协议备忘录 (MOA),或服务水平协议 (SLA). ...

  7. JVM指令集

    指令集,其实就是一系列指令的集合.例如我们需要给一个局部变量赋予1这个值,即这个动作:int a = 1; 在我们看来,这很简单,但对于机器来说需要很多个动作.所以Java虚拟机指令集就是将这些常用的 ...

  8. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

  9. linux系统下查看图片尺寸的命令

    1.首先需要安装:imagemagick,即: # apt-get install imagemagick 2.用 identify 命令查询对应图片的信息,即: # identify logo.jp ...

  10. 关于动画的几种状态表示的含义以及能够使用2d动画表述为什么要使用3d动画表述

    transform 四种转换 translate 位置scale 缩放rotate 旋转skew 倾斜 以上四种转换方式是比较特殊的,其实他们都是由matrix 矩阵转换来: animation的五种 ...