JavaScritp 中的 this

总结一句话（永真给的信）

大雪纷飞，永真在井上面丢垃圾一封信，信上写着如下内容：

谁最终调用，this 就指向谁。

那么如何理解永真写的话呢？请接着往下看~

默认绑定（指向少主window）

我（this）的职责就是保护指向 少主，少主喜欢用window玩游戏，姑且叫少主window吧。

  • 只狼听从了义父之前的命令，好好保护少主，所以this指针（只狼 ）默认绑定（跟随 ）的是 window（少主 ）
1
console.log(this);      // window
  • 少主活了几百年，还那么年轻，而且会的东西很多 少主还会a函数，写全局函数的话，也是指向的 window
    1
    2
    3
    4
    5
    function a() {
        console.log(this);
    }
    a()                     // window
    //实际上是  window.a(); 我们可以展开window看看
    在这里插入图片描述
  • 少主还会做日晷，沙漏等小工具，用来做定时器， 定时器是window（少主 ）的方法，所以this也会指向window。
    1
    2
    3
    4
    // setInterval 也是 window 下的方法
    setInterval(function () {
        console.log(this);		// window
    }, 1000)

严格模式（变若之子）

为了追寻长生不老，山上的僧人开始作妖，严格实验了好多小孩，最后就一个小女孩活了下来，成了变若之子（假的皇子）

  • 严格模式下的this指向 undefined（因为是假的皇子，所以就undefined了） 
    1
    2
    3
    4
    5
    6
    function a() {
        "use strict";
        console.log(this);
    }
    a()                     // undefined
    console.log(this);

    补充：什么是严格模式
    简单来说就是为了更好的规范 JavaScript 语言的书写，具体请参考阮一峰的严格模式详解。

隐式绑定（苇名弦一郎）

情景：我们带着皇子一路小跑，走出隧道，只见弦一郎在堵门，(简介，游戏名《只狼》，第一个BOSS的名字)

开门见山！！先来打苇名弦一郎。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = '我是全局name'
function fn() {
    var name = '我是fn';
    console.log(this.name);
}
var objA = {
    name:'我是objA',
    showA:fn
}
var objB = {
    name:"我是B对象",
    showB:objA
}
objB.showB.showA()

请问最终打印的是什么呢？这里我先不告诉你们答案，先跟着我一步一步往下走~

分支1：没打过弦一郎（没做对 ）：失去手臂，等待佛雕师（作者 ）给你安义肢（讲解 ）。
分支2：打过弦一郎：同样失去手臂（不要怪我卑鄙！我叫屑一狼），等待佛雕师….
战果：经验 +0，金币 -0，金钱 -0，HP -0，失去真手臂

次日：看到淡淡的油灯光亮，发现自己躺在破旧寺庙的草席上，并且获得了义肢。
战果：获得义肢，HP +100

来看一下栗子（苇名城杂兵，经验怪 ）：

1
2
3
4
5
6
7
8
function fn() {
    console.log(this);
}
var obj = {
    show: fn
};
obj.show();       // {show: ƒ}
// this 指向的关键在于是谁最终执行的

成功忍杀看懂了这个 ：金钱+5，经验+5

第二个栗子（苇名城杂兵，经验怪 ）：

1
2
3
4
5
6
7
function fn() {
    console.log(this);
}
var obj = {
    show: fn()		// 因为fn才最终执行者，括号代表执行！而 fn 是 window 下的函数
};
obj.show;       // window

成功忍杀：HP+5，金钱+5，经验+5
获得少主给的：伤葫芦，楔丸

此时来到了苇名城 城邑外围 城门道，遇到了第一个boss（河源田直盛）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function fn() {
    console.log(this.name);
}
var objA = {
    name:'我是A对象',
    showA:fn
}
var objB = {
    name:"我是B对象",
    showB:objA
}
objB.showB.showA()       // 我是A对象
// 为啥指的是objA呢？
// 你要清除是谁最终调用的fn，是不是objA里才有fn啊，最终调用的也是objA！所以指向就是objA。

成功忍杀看懂了这个 ：HP+10，金钱+10，经验+10
获得技能：识破

总结：以上例子可以说明，this的指向跟函数写在哪里没啥关系，关键在于最终调用者是谁！

隐式丢失(赤鬼 + 鬼庭形部雅孝)

情景：来到了被锁住的赤鬼。发现兜里没有月隐糖，也没有喷火器，没关系，有闪避+突刺，超级逃课打法。

1
2
3
4
5
6
7
8
9
10
11
var name = '我是全局name';
var obj = {
    name:'我是obj的name',
    fn:function () {
        console.log(this.name);
    }
}
var xxx = obj.fn;
xxx();		// 我是全局name
// 这里为什么是全局name呢
// 因为xxx是最终调用者，而xxx属于window，所以this指向的是window

成功忍杀：获得佛珠，忍者之药理知识•甲
失败：死，(少主的龙血之力，无尽复活 )

接着来到下一关

情景：来到了苇名城 正门外城区，遇到鬼庭形部雅孝，不慌，追的驴的尾巴，砍就完事儿了，逃课 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = '我是全局name';
var obj = {
    name:'我是obj的name',
    fn:function () {
        console.log(this.name);
    }
}
function xxx(param) {
	// 2. 然后在这里执行函数
    param();
    // 相当于 window.param()
}
// 1. 此时我把函数体当成参数传递进去了
xxx(obj.fn)     // 我是全局name

成功忍杀：战斗记忆：鬼庭形部雅孝（攻击力强化），机关筒（义手强化工具）。
失败：死，(少主的龙血之力，无尽复活 )

接着到了火牛关

情景：火牛血厚，建议买鞭炮（前面的都看懂了 ）

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = '我是全局name';
var obj = {
    name:'我是obj的name',
    fn:function () {
        console.log(this.name);
    }
};
var obj1 = {
    name:"福山润"
};

obj1.xxx = obj.fn;
obj1.xxx();     // 福山润

成功忍杀：佛珠，忍者药理·乙。
失败：死，减一半的￥

显式绑定（樱龙，白蛇）

我们可以通过call（干柿子 ）、apply（米 ）和bind（樱龙之泪 ）方法更改指针的指向（不同结局）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 显示转换
var objA = {
    name: "aaa"
};
var objB = {
    name: "bbb"
};
var objC = {
    name: "ccc"
};
var name = '我是全局name';
function fn() {
    console.log(this.name);
}
fn();               // 我是全局name
fn.call(objA);      // aaa
fn.apply(objB);     // bbb
fn.bind(objC)();    // ccc

成功忍杀枭，樱龙，白蛇：获得樱树枝，樱龙之泪，鲜柿子，月隐糖
失败：死，(少主的龙血之力，无尽复活 )，金钱 -1/2

某些方法也可以显式的更改指针，比方说forEach

1
2
3
4
5
6
7
var obj = {
    name:'铃木雅之'
};
var arr = [1,2,3,4];
arr.forEach(function () {
    console.log(this.name);     // 4 * 铃木雅之
},obj)

越到后期，游戏所需要的技巧就越高，熟练度也就越重要，（不我就是平a格挡流 ）
显式绑定的优先级 大于 隐式绑定的优先级，显式>隐式>默认

1
2
3
4
5
6
7
8
9
10
11
12
13
var objA = {
    name:'aaa',
    fn:function () {
        console.log(this.name);
    }
}
var objB = {
    name:'bbb'
}
// 前面的是objA.fn() ，隐式绑定，省略了括号，
// 后面的call()是显示绑定
// 当显式隐式都存在的时候，显式优先级更大
objA.fn.call(objB)      //bbb

Dom节点中的this（杂兵）

发现个小胖子，他跟同伴走丢了，他想要我给他找彩色风车…

其实这个跟之前讲的蛮像的，我就在这里再重复一下叭

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <div class="btn">点我</div>
</body>
<script>
    function show(){
        console.log(this);
    }
    document.querySelector('div').addEventListener('click', show);
    // <div class="btn">点我</div>
    
    document.querySelector('div').addEventListener('click', show());
    // window
</script>

成功忍杀：卧槽小胖子好可怜的，别杀了，骗到商人那里打扫战场
失败：良心受到谴责嗯~ o(￣▽￣)o

new

来到了苇名之底 毒沼，狮子猿 new 出一个小狮子猿，二打一，太难了

1
2
3
4
5
6
7
8
9
function Person() {
    // 1. 刚开始这里的this指向的是 window
    // 因为这是函数啊
    this.name = '堺雅人'
}
// 2. 然后通过new方法改变了 this 指向
var p = new Person();

console.log(p.name);

成功忍杀：战斗记忆：无首狮子猿，佛珠*2，血刀术（使用不死斩断绝不死后获得）
失败：死，减一半的￥

箭头函数（另类）

来到了苇名城 城邑外围 城门道，看到个没有头的家伙，无首，尼玛打了一架，被戳了菊花，屏幕上出现了：菜

取决于：**外层（上层）作用域中的this**，和他本身没有关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = 'www';
function fn() {
    // 这里就是箭头函数上层作用域
    // 这里的 this 指向 window
    console.log(this.name);
    return () => {
        console.log(this.name);
    }
}
var objA = {
    name:'aaa'
};
var xxx = fn();        // www
xxx();                 // www

成功忍杀：哼将之降灵
失败：死，减一半的￥

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var name = 'www';
function fn() {
	// 这里就是箭头函数上层作用域
    // 这里的 this 通过 call 方法指向了 objA
    console.log(this.name);
    return () => {
        console.log(this.name);
    }
}
var objA = {
    name:'aaa'
};
var xxx = fn.call(objA);        // aaa
xxx();                          // aaa

情景：最后来到了苇名城主城 贮水城区，弦一郎喝了变若（弱） 水，剑圣苇名一心想要实现他儿子的最后的愿望，就是守护这片土地，于是重返战场…

  • 箭头函数中的this它既是吃软饭的，也很专一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var name = 'www';
function fn() {
    // 吃软饭的箭头函数this：一直跟随着上层作用域 
    // 这里就是箭头函数上层作用域
    console.log(this.name);
    return () => {
        console.log(this.name);
    }
}
var objA = {
    name:'aaa'
};
var objB = {
    name:'bbb'
};
// 此时xxx就是箭头函数
var xxx = fn.call(objA);        // aaa

// 我这时修改箭头函数的指向，然并卵
// 箭头函数中的this很专一，取决于外层作用域的指向
xxx.call(objB);                 // aaa
  • 如果想改箭头函数的this，那么只能修改上层作用域的this，比方说上面的例子
1
2
3
4
5
6
// 只有修改上层作用域的this，才能改变箭头函数的this
var xxx = fn.call(objb);        // bbb

// 即使是修改了箭头函数的指向也没用
xxx.call(objA);                 // bbb

成功忍杀：战斗记忆：剑圣 苇名一心，秘传·龙闪（技能）。
失败：死，我死了200多回hhhh。
通关，赶快去救小皇子~

补充

执行上下文

执行上下文是指 函数调用时 在执行栈中产生的变量对象，这个变量对象我们无法直接访问，但是可以访问其中的变量、this对象等。

1
2
3
4
5
6
7
8
9
10
let fn, bar; // 1、进入全局上下文环境
bar = function(x) {
  let b = 5;
  fn(x + b); // 3、进入fn函数上下文环境
};
fn = function(y) {
  let c = 5;
  console.log(y + c); //4、fn出栈，bar出栈
};
bar(10); // 2、进入bar函数上下文环境

img

每次函数调用时，执行栈栈顶都会产生一个新的执行上下文环境，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前处于活动状态的正在执行的上下文，也称为活动对象（running execution context，图中蓝色的块），区别与底下被挂起的变量对象（执行上下文）。

字面量

用于表达源代码中一个固定值的表示法