再也不用被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
再也不用被this苦恼了的更多相关文章
- 妈妈再也不用担心别人问我是否真正用过redis了
1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...
- 有了这个,再也不用每次连新机器都要设置secure crt属性了
我连服务器用的是secure crt,每次ssh新服务器的时候都得手动设置字符编码和背景颜色,今天问了旁边的开发原来可以全局设置,以后连服务器的时候就再也不用手动设置相关属性了.步骤如下: 一开始点击 ...
- 锋利的js之妈妈再也不用担心我找错钱了
用js实现收银功能. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- 【阿里云产品公测】离线归档OAS,再也不用担心备份空间了
[阿里云产品公测]离线归档OAS,再也不用担心备份空间了 作者:阿里云用户莫须有3i 1 起步 1.1 初识OAS 啥是OAS,请看官方说明: 引用: 开放归档服务(Open Archive Se ...
- 学会这个删库再也不用跑路了~ --技术流ken
前言 相信每一个学IT的人或多或少都听说过从删库到跑路这个梗~下图也是在各种交流群屡禁不止,新人听着也是瑟瑟发抖. 人们茶余饭后,街头巷角难免要问... 下面技术流ken就教给各位新手们一招删库再也不 ...
- 有了 tldr,妈妈再也不用担心我记不住命令了
引言 有一次我在培训时说「程序员要善于使用 Terminal 以提高开发效率」,一位程序员反驳道:「这是 21 世纪,我们为什么要用落后的命令行,而不是先进的 GUI?」 是的,在一些人眼里,这个黑黑 ...
- 妈妈再也不用担心我使用git了
妈妈再也不用担心我使用git了 Dec 29, 2014 git git由于其灵活,速度快,离线工作等特点而倍受青睐,下面一步步来总结下git的基本命令和常用操作. 安装msysgit 下载地址:ms ...
- 利用CH341A编程器刷新BIOS,恢复BIOS,妈妈再也不用担心BIOS刷坏了
前几天,修电脑主析就捣鼓刷BIOS,结果刷完黑屏开不了机,立刻意识到完了,BIOS刷错了.就从网上查资料,各种方法试了个遍,什么用处都没有.终于功夫不负有心人,找到了编码器,知道了怎么用.下面看看具体 ...
- python爬虫07 | 有了 BeautifulSoup ,妈妈再也不用担心我的正则表达式了
我们上次做了 你的第一个爬虫,爬取当当网 Top 500 本五星好评书籍 有些朋友觉得 利用正则表达式去提取信息 太特么麻烦了 有没有什么别的方式 更方便过滤我们想要的内容啊 emmmm 你还别说 还 ...
随机推荐
- 整理CSS中display flex(布局利器)
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...
- DNS: Internet’s Directory
关于DNS 互联网上几乎一切活动都以DNS请求开始.DNS(Domain Name System)是Internet的目录.访问URL时,设备所要做的第一件事就是询问目录,根据域名查出IP地址. 查询 ...
- prime distance on a tree(点分治+fft)
最裸的点分治+fft,调了好久,太菜了.... #include<iostream> #include<cstring> #include<cstdio> #inc ...
- Exception.ToString()使用及其他方法比较
在日常C#的编码过程中,我们常常会使用try...catch...来抓住代码异常,并且在异常的时候打印log, 如下 try { } catch (Exception e) { //输出Log信息等 ...
- OC基础成员变量、属性变量、实例方法与类方法
首先,为什么我们要定义一个新类呢?按照我的理解,就是为了抽象出来一个新的东西(也就是类),用来存储更多的数据变量和方法,一切类都直接或间接继承与NSObject. 在类的头文件里我们可以定义成员变量. ...
- 学习笔记----html的lang属性
lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages. 单一的 zh 和 zh-CN 均属于废弃用法. 问题主要在于,zh 现在不是语言code了 ...
- win7安装Oracle 11g 详细教程
一.下载 可以去Oracle官网下载:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htm ...
- UnityTips:使用反射调用内部方法拓展编辑器
大家都知道Unity是一个C/C++的游戏引擎,C#只是Unity提供的脚本层.因此大部分功能都是通过C#来调用底层的C++代码的.而一些朋友可能不知道的是,其实Unity的C#代码中也有很多方法是我 ...
- 【ISC安全训练营】挑战价格极限第三天!!![北京]
每到周三都觉得离周末不远啦,人生都充满的了希望,同样的,今天的优惠福利依旧超级给力,错过了可就没有了哦! 周三福利 名额 周四福利 名额 周五福利 名额 3折购买任意课程资格 3名 4折购买任意课程资 ...
- 在Apache上http强制跳转到https
https已经配置完成,也可以正常使用,但输入域名或http加域名时也一样可以打开网站,于是想强制使用https 大概百度了一下方法,感觉与之前设置二级域名绑定二级目录时差不多 首先,修改httpd. ...