JavaScript中this指针的绑定规则
this指针的绑定规则
下面是对this指针绑定规则的整理,希望可以帮助到有需要的小伙伴。
(1)默认绑定
this被定义在某个函数体中
该函数被独立调用,没有作为任何一个对象的方法时
这个this就默认是指向全局对象的
如果这个全局对象存在,就去找全局对象的同名属性,返回该属性的值
如果没有可用的全局对象,还是会返回undefined
// 把this定义在某个函数体中
function fn(){console.log(this.z);
}// 独立调用该函数
fn(); // undefined// 定义一个全局的变量
var z = 300;
// 由于该全局对象不可用,所以会返回 undefined
(2)隐式绑定
全局对象就是全局作用域的上下文对象。全局对象作用于整个全局作用域中。
在一个函数里定义内容,函数作用域或局部作用域。函数作为某个对象的方法时,这个对象就是整个函数作用域里的对象。
函数作为另一个对象的方法存在,该对象是函数作用域的上下文对象。
上下文对象:
一个带this指针的函数是不是另一个对象的方法,如果是,该对象就是带this指针的上下文对象,如果不是,该对象就不是带this指针的上下文对象。
或者说一个带this指针的函数被某个对象拥有或包含,该对象就是上下文对象。
隐式绑定:
如果调用位置有上下文对象,就是隐式绑定。
实例:
// 定义一个包含this指针的函数
function fn(){console.log(this.h);
}// 定义一个对象,该对象的方法是包含this指针的函数
var obj = {h : 400,f : fn
};// 调用对象的方法
obj.f(); // 400// obj对象就是fn()函数的上下文对象。
调用位置会使用obj上下文对象来引用fn()函数,函数fn()被调用时obj对象就“拥有”或“包含”它。
隐式丢失是最常见的this绑定问题,指的就是被隐式绑定的函数会丢失绑定对象。
如果隐式绑定的了某个上下文对象,由于定义了一个和this调用的属性或方法同名的全局的属性或方法,定义一个该函数的别名,调用别名,该this对象就会指向全局对象。
实例:
var a = "global"; // a是全局对象的属性function foo(){console.log(this.a);
}var obj = {a : 2,fo : foo // 对象的fo()方法指向foo()函数
};// obj.foo(); // 就是隐式绑定,输出2// 定义一个全局变量,并被赋值为对象obj的fo()方法 // 注意:bar是foo函数的别名,引用的是foo函数本身
var bar = obj.fo; // 将bar作为一个函数进行调用
bar(); // 就是单纯的函数调用foo 相当于调用单独foo()函数 默认foo函数的对象是全局对象 输出的是undefined
(3)显示绑定
显示绑定可以解决隐式丢失的问题
利用apply()、call()方法让this固定指向一个对象,将该对象作为一个参数传进去,传给apply()或call()
实例:
var a = "global"; // a是全局对象的属性function foo(){console.log(this.a);
}var obj = {a : 2,fo : foo // 对象的fo()方法指向foo()函数
};// obj.foo(); // 就是隐式绑定,输出2// 定义一个全局变量,并被赋值为对象obj的fo()方法 // 注意:bar是foo函数的别名,引用的是foo函数本身
var bar = obj.fo; // 将bar作为一个函数进行调用
// bar(); // 就是单纯的函数调用foo 相当于调用单独foo()函数 默认foo函数的对象是全局对象 输出的是undefined// 解决隐式丢失的显示绑定// 1.调用apply()函数
// bar.apply(obj); // 2// 2.调用call()函数
bar.call(obj); // 2
(5)new绑定
new绑定就是构造函数创建对象时的new,new哪个对象,this就指向哪个对象。
// 创建一个构造函数
function Hero(name) {this.name = name;
}// 定义对象
var hero1 = new Hero('张无忌'); // this指向hero11
console.log(hero1); // Hero { name: '张无忌' }var hero2 = new Hero('周芷若'); // this指向hero2
console.log(hero2); // Hero { name: '周芷若' }
4种绑定总结:
默认指向全局对象
隐式绑定看上下文对象
显示绑定用call()或apply()明确指出this指向的是哪个对象
new绑定看new之后创建的对象是谁,this就指向谁
(如果有错误,希望大佬指正,万分感谢!)
JavaScript中this指针的绑定规则相关推荐
- JavaScript中,this的绑定规则
对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点. 比如下面的代码,this 指向就有三种方式. 在<你不知道的 JavaScript>一书中,我总算比较清 ...
- 【Javascript】javascript 中的指针
C/C++语音中指针让很多人望而却步,Java中没有指针让很多人趋之若鹜. 那么深受编程小白喜欢的javascript好像也没有指针啊?博主自己在学习的过程中,确实没有见到有哪块知识明确地指出 j ...
- JavaScript中this指针指向的彻底理解
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 这一点与函数中自由变量Action-varibal不同 1 va ...
- JS/JavaScript中两个等号 == 和 三个等号 === 的区别
JavaScript中两个等号 == 和 三个等号 === 的区别 一.概念 == 和 === (1) "=="叫做相等运算符,"==="叫做严格运算符. ...
- 学习笔记(三):JavaScript中的this
this 调用位置:顾名思义,调用位置就是寻找函数被调用的位置,换句话说就是找到当前正在执行的函数的前一个调用,调用位置决定了this的绑定. 调用栈:为了达到当前执行位置所调用的所有函数,调用位置就 ...
- Javascript中的对象拷贝(对象复制/克隆)
Javascript中的对象拷贝(对象复制/克隆) 李俊才 CSDN:jcLee95 邮箱:291148484@163.com 1. 对象的引用 要说"拷贝"还要先说"引 ...
- JavaScript算法之指针思想
JavaScript算法之指针思想 JavaScript中的指针其实就是下标位置,下面以一个例子来使用指针思想. // 尝试寻找字符串中,连续重复次数最多的字符 var str = 'aaaabbbb ...
- JavaScript this绑定规则
每个函数的this是在调用时被绑定的,完全取决于函数的调用位置. 1 默认绑定 function foo() {console.log(this); //输出:Window {postMessage: ...
- this调用语句必须是构造函数中的第一个可执行语句_详解-JavaScript 的 this 指向和绑定...
JavaScript 中的 new.bind.call.apply 实际这些都离不开 this,因此本文将着重讨论 this,在此过程中分别讲解其他相关知识点. 注意: 本文属于基础篇,请大神绕路.如 ...
最新文章
- 【动态规划】Part1
- 【Visual C++】游戏开发笔记四十一 浅墨DirectX教程之九 为三维世界添彩:纹理映射技术(一)...
- 进阶– Java EE 7前端5强
- 豪投10亿!华为放话:3年培养100万AI人才!网友神回应了
- CSDN 创始人蒋涛:AI 定义的开发者时代
- Python中的日期和时间
- 汇编 第二章 寄存器
- Mysql 中时间日期函数
- 凸包算法详解(Graham扫描法)
- bom成本分析模型_BOM成本核算实例
- 电脑状态栏中,声音图标不见了怎么办?三招帮你找回!
- 50、LOLNeRF: Learn from One Look
- 小程序入口传参:关于带参数的小程序扫码进入的方法
- mac远程控制pc电脑的方法 pc控制mac
- sklearn基础篇(三)-- 鸢尾花(iris)数据集分析和分类
- gif制作软件哪个好用?建议收藏这些软件
- JavaScript AMD 模块
- 使用python快速查看hdf5文件
- Live Wallpaper Themes 4K Pro:4K超清动态壁纸
- Unity 物体移动碰撞抖动(原因和解决方法)
热门文章
- iOS :Object-C 语言merge两个字典对象
- HDU 2199 Can you solve this equation?【二分查找】
- iOS开发之在地图上绘制出你运行的轨迹
- 梦里看到你为我写的情书
- Bailian2944 单词替换【字符串流】
- Go语言实现文本文件拷贝
- HDU2567 寻梦【输入输出流+水题】
- CCF NOI1145 数字金字塔【DP】
- eclipse 环境 JUnit 测试框架(junit.framework.* 与 org.junit.*)
- Python Tricks(十三)—— 欧几里得算法