没有合适的资源?快使用搜索试试~ 我知道了~
Javascript 中 this指向
需积分: 0 0 下载量 15 浏览量
2023-09-07
15:41:06
上传
评论
收藏 431KB PDF 举报
温馨提示
试读
17页
Javascript 中 this指向
资源推荐
资源详情
资源评论
6. this 指向
!
本⽂主要包含以下内容:
全局环境中的 this
上下⽂对象调⽤中的 this
this 指向绑定事件的元素
改变 this 指向
箭头函数的 this 指向
在前⾯的⽂章中,我们已经介绍了⼀个执⾏上下⽂中的绝⼤部分内容,现在只剩下最后⼀块
砖,this 指向。
在对象内部的⽅法中使⽤对象内部的属性是⼀个⾮常普遍的需求。但是 JavaScript 的作⽤域机制
并不⽀持这⼀点,基于这个需求,JavaScript ⼜搞出来另外⼀套 this 机制。
this 关键字是⼀个⾮常重要的语法点。毫不夸张地说,不理解它的含义,⼤部分开发任务都⽆法完
成。
接下来咱们就展开来介绍 this,不过在讲解之前,希望你能区分清楚作⽤域链和 this 是两套不同的
系统,它们之间基本没太多联系。在前期明确这点,可以避免你在学习 this 的过程中,和作⽤域产
⽣⼀些不必要的关联。
this 可以⽤在构造函数之中,表示实例对象。除此之外,this 还可以⽤在别的场合。但不管是什么
场合,this 都有⼀个共同点:它总是返回⼀个对象。
关于 this 的指向,有⼀种⼴为流传的说法就是“谁调⽤它,this 就指向谁”。
这样的说法没有太⼤的问题,但是并不是太全⾯。总结起来,this 的指向规律有如下⼏条:
在函数体中,⾮显式或隐式地简单调⽤函数时,在严格模式下,函数内的 this 会被绑定到
undefined 上,在⾮严格模式下则会被绑定到全局对象 window/global 上。
⼀般使⽤ new ⽅法调⽤构造函数时,构造函数内的 this 会被绑定到新创建的对象上。
⼀般通过 call/apply/bind ⽅法显式调⽤函数时,函数体内的 this 会被绑定到指定参数的对象
上。
⼀般通过上下⽂对象调⽤函数时,函数体内的 this 会被绑定到该对象上。
在箭头函数中,this 的指向是由外层(函数或全局)作⽤域来决定的。
当然,真实环境多种多样,下⾯我们就来根据实战例题逐⼀梳理。
全局环境中的 this
!
例题 1:
function f1() {
console.log(this);
}
function f2() {
'use strict'
console.log(this);
}
f1(); // window or global
f2(); // undefined
这种情况相对简单、直接,函数在浏览器全局环境下被简单调⽤,在⾮严格模式下 this 指向
window,在通过 use strict 指明严格模式的情况下指向 undefined。
虽然上⾯的题⽬⽐较基础,但是需要注意上⾯题⽬的变种,例如
例题 2:
const foo = {
bar : 10,
fn : function(){
console.log(this); // window or global
console.log(this.bar); // undefined
}
}
var fn1 = foo.fn;
fn1();
这⾥的 this 仍然指向 window。虽然 fn 函数在 foo 对象中作为该对象的⼀个⽅法,但是在赋值给
fn1 之后,fn1 仍然是在 window 的全局环境下执⾏的。因此上⾯的代码仍然会输出 window 和
undefined。
还是上⾯这道题⽬,如果改成如下的形式
例题 3:
const foo = {
bar : 10,
fn : function(){
console.log(this); // { bar: 10, fn: [Function: fn] }
console.log(this.bar); // 10
}
}
foo.fn();
这时,this 指向的是最后调⽤它的对象,在 foo.fn( ) 语句中,this 指向的是 foo 对象。
上下⽂对象调⽤中的 this
!
例题 4:
const student = {
name: 'zhangsan',
fn: function () {
return this;
}
}
console.log(student.fn() === student); // true
在上⾯的代码中,this 指向当前的对象 student,所以最终会返回 true。
当存在更复杂的调⽤关系时,如以下代码中的嵌套关系,this 将指向最后调⽤它的对象,例如
例题 5:
const student = {
name: 'zhangsan',
son: {
name: 'zhangxiaosan',
fn: function () {
return this.name
}
}
}
console.log(student.son.fn()); // zhangxiaosan
剩余16页未读,继续阅读
资源评论
阿深的进步嗷嗷
- 粉丝: 137
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功