this指向问题
1.this显示绑定
含义:当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定(绑定到全局window对象)
在显示绑定下(函数将取得在“包含对象”里的永久居住权),一直都会“住在这里”
1.1全局函数
function fire() {
console.log(this === window); //fire此时是全局的方法,this指向window
}
fire(); // 输出true
1.2函数内嵌套函数
function fire() {
// 我是被定义在函数内部的函数哦!
function innerFire() {
console.log(this === window); //未明确调用对象,this指向window
}
innerFire(); // 独立函数调用
}
fire(); // 输出true
innerFire();
示例:
var a = 1;
console.log(this.a); //1 因为此时this指向了window,因而调用1
function fire() {
var a = 2;
console.log(this.a); //1 因为此时this指向了window,因而调用1
function innerFire() {
var a = 3;
console.log(this.a); //1 因为此时this指向了window,因而调用1
}
innerFire();
}
fire(); //输出1
与作用域的区别: 全局作用域和局部作用域, 去掉this可发现区别
var a = 1;
console.log(a); //1 a在全局作用域
function fire() {
var a = 2;
console.log(a); // 2 fire函数作用域
function innerFire() {
var a = 3;
console.log(a); //3 此时打印输出a,a在innerFIre作用域。从自身作用域查找变量,未找到才网上查找
}
innerFire();
}
fire();
1.3对象内层函数内部函数
var obj = {
fire: function () { //此时的fire函数其实用到了隐式绑定
function innerFire() {
console.log(this === window); //未明确调用对象,this指向window
}
innerFire();
}
}
obj.fire(); //输出 true
示例:
var a = 1;
console.log(this.a); //1 this指向全局变量window
var obj = {
a: 2,
fire: function () {
var a = 3;
console.log(this.a); //2 因为是obj.fire(),调用了fire函数,因为this指向了obj,输出了obj下的a=2
function innerFire() {
var a = 4;
console.log(this.a); //1 未明确调用对象,this指向window
}
innerFire(); //没有明确调用的对象
console.log(this.a); //2 this指向obj
}
}
obj.fire();
2.this隐式绑定
2.1隐式绑定
当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面,这时候,通过this可以直接访问所绑定的对象里面的其他属性
特别注意:在隐式绑定下函数只是暂时住在“包含对象”的旅馆里面,可能过几天就又到另一家旅馆住了
var obj = { a: 1, fire: function () { //此时函数的this被隐式绑定到了对象obj console.log(this == obj); // obj中有fire函数,因而默认this指向obj console.log(this.a); // 1 this.a 相当于obj.a =1 } } obj.fire(); // 输出1
2.2动态绑定
this是在代码运行期绑定而不是在书写期
var obj = {
a: 1, // a是定义在对象obj中的属性 1
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量 2
obj.fire(); //1 此时fire的指向时obj
var fireInGrobal = obj.fire; //因为fireInGrobal是全局变量,this对于obj的绑定丢失,绑定到了全局window
fireInGrobal(); // 输出 2 输出全局变量啊
var a = 2;
var obj = {
a: 1, // a是定义在对象obj中的属性
fire: function () {
console.log(this.a)
}
}
function otherFire(fn) { //全局函数,this绑定window
fn();
}
otherFire(obj.fire); // 输出2 this对于obj的绑定丢失,绑定到了全局this上面
var obj = {
a: 1,
obj2: {
a: 2,
obj3: {
a: 3,
getA: function () { //obj3.getA() this绑定到了obj3当中
console.log(this.a)
}
}
}
}
obj.obj2.obj3.getA(); // 输出3
3.this指向
this的指向不是由定义this决定的,而是随脚本解析自动赋值的。
3.1全局环境作用于:this在全局环境始终指向window
变量形式
console.log(this === window) // true
console.log(window.alert === this.alert) // true
console.log(this.parseInt("021", 10)) // 21
var fruit = "banana"; // 定义一个全局变量,等同于window.fruit = "banana"
3.2.函数环境作用域:函数有谁调用,this就指向谁
3.3.非严格模式
function fn() {
console.log(this); //window
}
fn() === window; // true;window.fn(),此处默认省略window
3.4.严格模式
3.4.1.全局环境下,this指向window
"use strict";
this.b = "MDN";
console.log(this == window) // "MDN"
console.log(b) // "MDN"
3.4.2.函数环境下,this为undefined
function fn() {
"use strict"; // 这里是严格模式
console.log(this); //window
}
fn() === undefined //true
3.5.对象的方法函数调用:指向该方法所属的对象
3.5.1.隐式调用
var obj = {
a: 1,
fn: function () {
return this;
}
}
console.log(obj.fn() == obj); //true 函数被obj调用,指向obj
3.5.2.this动态绑定
var obj = {
a: 1,
fn: function () {
return this;
}
}
console.log(obj.fn()); //1 函数被obj调用,指向obj,输出obj的a=1
var a = 2;
var newfun = obj.fn; //此时更改this指向为全局变量newfun
newfun(); //2 ,this访问全局变量a=2
4.在构造函数中:this始终指向新对象
function Person(age, name) {
this.age = age;
this.name = name
console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2
}
var p1 = new Person(18, 'zs')
var p2 = new Person(18, 'ww')
5.通过事件绑定的方法:this指向绑定事件的对象
oBtn.onclick = function () {
console.log(this); // btn
}
<button id = "btn" > hh < /button>
6.定时器函数:因为是异步操作,this指向window
延时函数内部的回调函数的this指向全局对象window(当然我们可以通过bind方法改变其内部函数的this指向)
我们常见的window属性和方法有alter,document,parselnt,setTimeout,setTimeout,setInterval,location等等,
这些默认的情况下是省略window前缀的
6.1普通定时器
setInterval(function () {
console.log(this); // window
}, 1000);
6.2定时器嵌套
function Person() {
this.age = 0;
setTimeout(function () {
console.log(this);
}, 3000);
}
var p = new Person(); //3秒后返回 window 对象
6.3可以改变this指向(3方法)
function Person() {
this.age = 0;
setTimeout((function () {
console.log(this);
}).bind(this), 3000);
}
var p = new Person(); //3秒后返回构造函数新生成的对象 Person{...}
7.自执行函数(匿名函数):指向全局变量window
(function inner() {
console.log(this); //this ==> window
})();
8.箭头函数
要点;
a.箭头函数的this是在定义函数时绑定的,不是在执行过程中绑定的
b.箭头函数中的this始终指向父级对象
c.所有call,apply,bind方法对于箭头函数来说只是传入参数,对它的this毫无影响