葡萄藤PPT
JS中this的指向
大家好，我是IT修真院郑州分院第6期的学员王栋，一枚正直、纯洁、善良的前端程序员今天给大家分享一下，修真院官网js任务2深度思考中的知识点——JS中this的指向
1.背景介绍
在javaScript中，this是动态绑定的，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。
这就导致了this具备了多重含义，可以使得this可以更灵活地使用。
但是，带来了灵活性的同时也会给我们初学者带来不少困惑。
简而言之, this 是一个特殊的标识符关键字 —— 在每个 function 中自动根据作用域(scope) 确定,
指向的是此次调用的 “所有者,owner”。
2.知识剖析
在全局函数中，this就是window，当函数被作为某个对象的方法调用时，this就是那个对象，
匿名函数的执行具有全局性，也就是说，匿名函数this指向window。
this的常见的四种情形
- 1.纯粹的作为函数调用：全局函数中，this指向window
全局环境中的this
function a(){
console.log(this);
}
a();
这里调用了a函数，而a函数的执行环境是全局环境，这里的this也就指向了全局变量window。
严格模式 ‘use strict’下的this
'use strict';
function a(){
this.user = "hello";
console.log(this);
console.log(this.user);
}
a();
console.log(user)
原因：严格模式下这种调用方式会报错，如果不用严格模式，可能你不知不觉中就定义了几个全局变量。
在javaScript中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。
1.作为对象方法调用:this指向该对象本身
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
console.log(this);
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1);
console.log(point.x);
var car = {
brand: "Nissan",
getBrand: function(){
console.log(this.brand);
console.log(this);
console.log(this===car);
}
};
car.getBrand();
var brand = 'Nissan';
var myCar = {brand: 'Honda'};
var getBrand = function() {
console.log(this.brand);
};
myCar.getBrand = getBrand;
myCar.getBrand();
// output: Honda
getBrand();
// output: Nissan
2.作为函数调用:this指向全局对象
function a(x) {
this.x = x;
}
a(5);
console.log(this.x);
console.log(x)
console.log(window.x)
3.作为构造函数调用:this 绑定到新创建的对象上
function Point(){
this.x = 1;
}
var a = new Point;
console.log(a.x)
var x = 2;
function test(){
this.x = 1;
}
var a = new test();
console.log(a.x)
console.log(x)
注：构造函数不使用new调用，则和普通函数一样。一般地，构造函数首字母大写
4.使用 apply 或 call 调用：当使用apply和call时，表示把一个函数表达式放入call或apply括号后面的第一个参数的环境中，
this则指向这个参数；两者不同的地方在于apply第二个参数必须是个数组。简言之就是apply或者call谁，this就指向谁
function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
}
var p1 = new Point(0, 0);
console.log(p1);
var p2 = {x: 0, y: 0};
p1.moveTo(1, 1);
console.log(p1);
p1.moveTo.apply(p2, [10, 10]);
console.log(p1);
console.log(p2);
3、常见问题
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(this.foo, 1000);
}
}
obj.foo2();
异步回调函数中的this指向问题，现象：两次打印的this不一样
'use strict';
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(this.foo, 1000);
}
}
obj.foo2();
现象：加了严格模式，this仍然指向了window
setTimeout()其实全名为window.setTimeout()，是window下面的一个方法，不管是否是严格模式，指向的都是window。
4、解决方案
1.将this赋给一个变量，然后通过闭包来访问这个变量来打印出我们想要的值。
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
var _this = this;
setTimeout(function() {
console.log(this); // Window
console.log(_this); // Object {name: "qiutc"}
}, 1000);
}
}
obj.foo2();
2.使用bind()将执行环境放到obj这个对象中去，可以用this代替。
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function()
var _this = this;
setTimeout(function() {
console.log(this); //Object {name: "qiutc"}
}.bind(this), 1000);
}
}
obj.foo2();
3.使用ES6中的箭头函数。
var obj = {
name: 'qiutc',
foo: function() {
console.log(this);
},
foo2: function() {
console.log(this);
setTimeout(() => {
console.log(this); // Object {name: "qiutc"}
}, 1000);
}
}
obj.foo2();
箭头函数中的 this 只和定义它时候的作用域的 this 有关，而与在哪里以及如何调用它无关，同时它的 this 指向是不可改变的。
5、编码实战
window.val = 1;
var obj = {
val: 2,
dbl: function () {
this.val *= 2;
val *= 2;
console.log(val);
console.log(this.val);
}
};
// 说出下面的输出结果
obj.dbl();
var func = obj.dbl;
func()
6.扩展思考
问题：如何了解this到底指向谁？
1.当函数作为对象的方法调用时，this指向该对象。
2.当函数作为单独函数调用时，this指向全局对象（严格模式时，为undefined）
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this，可以用前面讲过的三种方法来使this指向宿主对象。
apply和call，bind调用或者绑定的this，指向相应的对象
7.参考文献
参考一：深入浅出 JavaScript 中的 this
参考二：JavaScript 中的 this !
参考三：JavaScript中的this用法与指向
参考四：如何理解 JavaScript 中的 this 关键字？
8、更多讨论
关于this的指向问题大家还有什么好的见解？
this指向把四种情况弄明白之后还是很简单的，尤其是闭包可能不太好理解，其实掌握之后还是很灵活的。
问题：
Q1：要贝贝：apply方法有什么作用？一般在什么情况下可以使用apply？
A1：王栋：apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.，call:和apply的意思一样,只不过是参数列表不一样.。
在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));
Q2：王姣妍：ES6是什么？
A2：王栋：ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，在2015年6月正式发布。
Q3：任先阳：bind是干什么用的？什么时候使用？
A3：王栋：bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。场景就是在绑定函数，偏函数，settimeout等
Q4：要贝贝：什么时候使用apply什么时候使用call
A4：王栋：传递参数是数组形式的时候用apply，反之使用call
JS中this指向
网友评论