javaScript知识点之this
来源:互联网 发布:网达软件股票 编辑:程序博客网 时间:2024/06/11 00:55
前言
最近又重新阅读《你不知道的JavaScript》系列书籍,将以前的笔记进行整理总结一下,今天就讲解一下this相关的问题,实际上该系列书籍中对于this的说明以及讲解非常的详细,本篇文章的目的有两个:
- 总结this的知识点,加深对其的理解认知
- 抽取this部分的知识,形成模块化的记忆
首先就从几道面试题来开始this部分的说明,面试题如下:
第一道
function test() { console.log(this.name);}var obj = { name: 'whoami', getName: test};var name = 'which';obj.getName();var output = obj.getName;output();
第二道
function test() { console.log(this.name);}var obj = { name: 'whoami', getName: test};setTimeout(obj.getName, 1000);
第三道
function test(x) { this.x = x; return this;}var x = test(5);var y = test(6);console.log(x.x);console.log(y.x);
下面就分析下上面三道面试题所涉及的this的问题,结果如下:
第一道: 'whoami'、'which'(严格模式下, 第二个结果是undefined)第二道: undefined第三道: undefined、6
第一道题涉及的知识点:this绑定的两种方式以及绑定丢失
第二道题…:this隐式绑定、绑定丢失
第三道题…:this默认绑定、变量提升、同名变量知识
在彻底明白上面结果是如何得来前,先具体讲解下this的绑定时间、四种绑定方式以及其优先级:
this存在于所有函数中,在函数调用时被赋值
- 默认绑定,此时this的指向是window对象(非严格模式下,严格模式下 默认绑定this === undefined)
function test() { console.log(this);}test(); // this === window
- 隐式绑定,此时this指向包含它的对象
function test() { console.log(this);}var obj = { getValue: test};obj.getValue(); // obj {}
- 显式绑定,就是使用call、apply或bind方法来显式绑定
function test() { console.log(this);}var obj = { name: 'whoami'};test.call(obj); // obj {name: 'whoami'}
- new绑定,就是使用new关键字会存在this的绑定
function Test() { console.log(this);}var test = new Test(); // Test(){}
这四种方式的优先级如下(从高到低依次):
new绑定 显式绑定 隐式绑定 默认绑定
凡事总有例外,this的绑定也是,下面说明几种例外:
1、赋值带来的绑定丢失
function test() { console.log(this);}var obj = { getValue: test // 此处是隐式绑定};var output = obj.getValue; // 赋值output(); // 赋值导致绑定丢失,此时应用默认绑定/** * (output = obj.getValue)() 等价于output() *//** * setTimeout() 实际上类似于 * function setTimeout(fn, delay) { * } * fn = obj.getValue故也会导致绑定丢失,应用默认绑定 */ setTimeout(obj.getValue, 1000);
2、null或undefined带来的绑定丢失
function test() { console.log(this);}test.call(null); // this === undefined(非严格模式下)test.call(undefined); // this === window(非严格模式下)test.call(2); // 此时应用显式绑定,因为除了Null、Undefined类型之外的其他类型在进行操作时都会在底层产生该类型的对象
再回头看三道面试题:
- 第一道是隐式绑定,不过存在赋值导致绑定丢失,应用默认绑定
- 第二道同样如此
- 第三道是默认绑定,不过主要考察点在于变量提升以及同名变量的处理
就具体分析下第三道面试题:
function test(x) { this.x = x; return this;}var x = test(5);var y = test(6);console.log(x.x);console.log(y.x);
因为全局变量会自动成为window的属性、变量和函数提升的问题,上面的代码实际上如下:
function test(x) { // this === window,所以this.x = window.x this.x = x; return this;}var x, y;x = test(5);// 此时window.x === x, x === widnowy = a(6);// 此时x === 6// x.x 此时为6.x, 故为undefinedconsole.log(x.x);// y.x 此时为window.xconsole.log(y.x);
下面补充下其他情况this指向:
- 函数内部函数中this指向的问题,在内部函数中this使用默认绑定
function test() { (function() { console.log(this); })();}test(); // this === window
ES6中增加了箭头函数,该函数有两个作用:
- 简写函数定义
- this指向明确,指向该函数所在作用域的this的值
实例:
var test = () => console.log(this);test(); // this === windowtest.call({}); // this === window
this的总结就到这里了,每天进步一点,致远行的你我。
阅读全文
0 0
- javaScript知识点之this
- javascript this 小知识点
- JavaScript中this的知识点
- JavaScript之this关键字
- JavaScript之this
- JavaScript 之 this 详解
- JavaScript加强之this
- javascript之this详解
- JavaScript之this释疑
- javascript之this关键字
- javascript之this指针
- 深入浅出JavaScript之this
- javascript学习之this
- JavaScript之初探this
- JavaScript之学习this
- JavaScript之this
- JavaScript之this对象
- javascript之this
- 微信小程序中踩过的坑 input textarea swiper
- Hanoi双塔问题
- Mysql汉字乱码的问题
- tensorflow读取数据
- Linux tail 命令
- javaScript知识点之this
- centos 7 修改网卡名称
- bzoj 2002 弹飞绵羊 分块
- KMP算法-next数组的应用-循环节问题
- 创建ORACLE表空间及管理
- php核心学习-设计模式的学习-委托模式
- POJ 3669 Meteor Shower
- 关于php的知识
- POJ 3169 Layout (差分约束最短路)