Day18 - this指向的多种形式
什么是上下文
什么是上下文，举一个例子。
谈谈我的家乡在哪里，如果你的上下文是在国际演讲的舞台。你一定会说我的家乡在中国。
那如果上线文是在国内呢，我的家乡在哪个省或者是直辖市。
这就是上下文。
什么是this
this就是Javascript提供的一个上下文环境
在javascript当中每一个function都是一个对象，所以在这个里var temp=this 指的是function当前的对象。this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
在函数执行时，this 总是指向调用该函数的对象。要判断 this 的指向，其实就是判断 this 所在的函数属于谁。
this指向通用规则
永远指向方法所归属对象
指向取决于调用位置
4种形式
普通函数中的
如果一个函数不属于任何一个对象，上下文就是全局对象。 在浏览器中就是window，如果是node运行时中就是global
function say() {
console.log("我的家乡", this.name);
}
name = "中国";
say(); // 我的家乡在中国复制代码只要不套用新的对象，无论套用多少个函数只要不存在上层对象就会指向全局。
name = '中国'
function f1() {
var name = 北京
function f2() {
console.log(this)
}
f2()
}
f1()复制代码还有一个地方要记忆的是在Dom事件会回调里，this指向绑定事件对象。
<html>
<button id='1'>1</button>
<button id='2'>2</button>
<script>
function fn() {
console.log(this)
}
document.getElementById('1').addEventListener('click',fn)
document.getElementById('2').addEventListener('click',fn)
</script>
</html>复制代码对象属性
接着说一下在对象中的this指向。this指向在对象中指向对象实例。其实归属某一个对象才是上下文环境使用最多的情况。同样一个方法可以根据对象实例中数据成员的不同产生不同的变化。
在北京对象中 => 我的家乡在北京
function say() {
console.log("我的住", this.name);
}
var bj = {
name: "北京",
say: () => say(),
chaoyang: {
name: "朝阳",
say,
},
};
bj.say(); // 我的家乡在北京
bj.chaoyang.say(); // 我的家乡在朝阳复制代码构造函数与Class
类是对象实例，可以认为是实例的模板。
比如一个国家模板，实例一个国家比如中国。
当然国家模板中的say方法指向的创建的对象实china
function say() {
console.log("我的家乡:", this.name);
}
function Country(name) {
this.name = name
}
Country.prototype.say = say
const china = new Country('中国')
china.say()复制代码使用ES6中的class关键字同理，构造函数constructor等同于上文中的Country构造函数
class Country {
constructor(name) {
this.name = name
}
say() {
console.log("我的家乡:", this.name);
}
}
const china = new Country('中国')
china.say()复制代码call、apply、bind方法中
最后说一下三个可以绑定上下文的函数。
apply与call还有bind并没有用法上的差异只是在api参数上的差异。
function say() {
console.log('我的家乡:' + this.name)
}
window.name = '中国'
say()
say.apply({name : '北京'})
say.call({name : '朝阳'})
var mySay = say.bind({name: '曹县'})
mySay()复制代码补充
严格模式下this
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
严格模式本身是为了消灭Javascript中的一些不合理之处。
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
在严格模式下的this指向也会有一定变化。
函数外指向window
"use strict"
console.log(this) // window
function foo() {
console.log(this) // undefined
}
foo()复制代码函数中是undefined
function func() {
"use strict"
console.log(this);
}
func(); // 输出是undefined复制代码箭头函数
在箭头函数中，this总是指向词法作用域，也就是外层调用者。而不是方法所在对象。
比如下面的方法调用者是全局对象，所以上下文也指向全局。
function say() {
console.log("我的家乡在"+this.name);
}
var bj = {
name: "北京",
say: () => say(),
chaoyang: {
name: "朝阳",
say : () => say(), // 修改为箭头函数
},
};
name = '中国'
bj.say(); // 我的家乡在中国
bj.chaoyang.say(); // 我的家乡在中国复制代码面试攻略
这是一道基础题，只要回答的有条理就行了。
首先是函数，对象，构造函数以及严格模式和箭头函数对this指向的影响。
作者：全栈然叔
链接：https://juejin.cn/post/7054525103098298404