变态的this
前言
影响因素
-
调用时输入的参数 params -
定义时的环境env
声明一个函数
const f1 = new Function('x', 'y', 'return x+y')
function f2(x, y) {return x + y}
const f3 = function (x, y) {return x + y}
const f4 = (x, y) => x + y
其中f1 不常用，f2是声明一个函数f2，const f3 和 const f4这两个都不属于函数声明的部分，为什么要加上，因为f3 里面的函数是一个匿名函数，如果没有const f3 那么这个匿名函数声明之后就找不到这个匿名函数了，所以必须声明之后马上赋值。f4 是最新的语法叫做箭头函数，括号里面的是参数，然后返回x+y
f1、f2、f3是ES6之前的语法，支持this/arguments/new
而f4是ES6 新出的语法，不支持this/arguments/new
箭头函数为何不支持this
const f =()=>console.log(this)
f() //Window
f.call({name:'小红'}) //Window
image.png
看一下前言中函数的影响因素，一个是调用的参数，一个是定义的环境。
在箭头函数里面，this就是一个环境。
//代码1
const a=233
const f2 =() => console.log(a)
//代码2
console.log(this)
const f1 =() -> console.log(this)
image.png
箭头函数如何处理a ，就如何处理this
即
箭头函数把this当做外部的变量，仅此而已，但是非箭头函数的this有很多的特殊处理
箭头函数不支持 this 指的就是箭头函数对this与其他的变量一视同仁，不会特殊对待
非箭头函数的this
死记方法
- this是上下文
- 全局环境执行函数时，this是全局对象
- 调用对象的方法时，this是该对象
- 函数里调用函数时，this是全局对象
- 箭头函数里的this，不看调用，看定义（静态作用域）
- 还有人说箭头函数里的this指向外面的this
- 用new调用函数时，this是新增对象
- 可以用call/apply/bind指定this
this是参数还是环境？
答：this是一个参数，它是一个隐性参数
this的确定
显式this
- fn.call(asThis,1,2)
- fn.bind(asThis,1,2)()
- fn.method.call(obj,'hi')
隐式this
- fn(1,2) // fn.call(undefined,1,2)
- obj.method('hi') // obj.method.call('obj','hi')
- array0 //array[0].call('array','hi')
image.png
image.png
最后一个图怎么理解？
array是一个数组，[f,"2"],array[0]是一个函数f，然后加上括号就是调用这个函数f ，所以最后打印出来的this就是 array ，p1就是传入的参数hi。
测试一下
button.onclick =function (e){
console.log(this) //this是参数，答 button 是错误的
}
正确答案就是 不知道
第一种情况，用户点击按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="a">按钮</button>
</body>
<script>
var button =document.getElementById('a')
button.onclick=function (e){
console.log(this)
}
</script>
</html>
image.png
答案的结果是button ，为什么会说这个答案是错的呢？因为这里面没有说用户点击这个按钮，只是说了这段代码
第二种情况 将button.onclick赋值给另一个变量，在调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="a">按钮</button>
</body>
<script>
var button =document.getElementById('a')
button.onclick=function (e){
console.log(this)
}
var f =button.onclick
f()
</script>
</html>
image.png
image.png
解析：第一个就是不能确定this，第二个就是看调用的是谁
如何回答：这个this的值是无法确定，我们要看这次是如何调用的，如果是用户点击这个按钮，那么浏览器就一定会把button作为参数传进去。如果是通过其他方式调用的，就看它是怎么调用的。比如说：它声明一个变量 f 等于这个 button.onclick ,然后调用，那么这次的浏览器就会把window作为参数传入进去。如果你用其他方式，比如说 f.call('xiaohong'),那么浏览器传入的就是字符串String
看下一个题目：
let length = 10
function fn() {
console.log(this.length)
}
let obj = {
length: 5,
method(fn) {
fn()
arguments[0]()
}
}
obj.method(fn, 1)
看不懂！看下一个代码，将里面的 arguments[0]() 暂时去掉
let length = 10
function fn() {
console.log(this.length) //this 就是window ，window.length 就是看有多少个窗口或者iframe
}
let obj = {
length: 5,
method(fn) {
fn.call(undefined) //fn()
}
}
obj.method(fn, 1)
这个时候很确定这里面的this指的就是Window
let length = 10
function fn() {
console.log(this.length)
}
let obj = {
length: 5,
method(fn) {
arguments[0]()
}
}
obj.method(fn, 1)
将里面的 arguments[0]() 改为 arguments[0].call(arguments)，传进去的this可以确定是一个数组，那么arguments[0] 也就是执行fn，可以改为arguments.0.call(arguments) 所以就是fn.0.call(arguments) 最后就是fn.call(arguments) ，又因为obj.method(fn, 1)输入了两个参数，因此里面的arguments 代表的就是实参的长度，所以这里输出的是2
总结
规则
this是call的第一个参数
new 重新设计了this、箭头函数不接受this
记忆点
- 函数的返回值由参数和环境确定
- this是参数，arguments也是参数
- 全局变量和自由变量是环境
