javascript this指向初探

注：this 即绑定函数上下文
1. 普通函数this指向

var user = "ynqc";
function f() {
    var user = "hello";
    console.log(this.user); //ynqc
    console.log(this); //Window
}
f();

函数（箭头函数不一样）的this值即谁调用了该函数，this就指向谁。这里【f()】等价于【window.f()】，即this指向window。

2. 对象里面this指向

var obj = {
	name: "ynqc",
	f: function () {
		console.log(this.name); // ynqc
	}
}
obj.f();

由于【obj.f()】是obj调用了函数【f】，所以这里this指向了obj

3.对象里面的对象，对象内函数调用

var obj = {
	name: "ynqc",
	age: "22",
	f: function () {
		console.log(this.name); // ynqc
	},
	newObj: {
		name: "new ynqc",
		f: function () {
			console.log(this); // {name: "new ynqc", f: ƒ}
			console.log(this.name); // new ynqc
			console.log(this.age); //undefined
		}
	}
}
obj.newObj.f()

this永远指向的是最后调用它的对象，不会跳级，如下

var obj = {
	age: "22",
	f: function () {
		console.log(this.name); // ynqc
	},
	newObj: {
		age: 23,
		f: function () {
			console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, 	close: ƒ, frames: Window, …}
       		console.log(this.age); // undefined
		}
	}
}
var fuc = obj.newObj.f;
fuc();

4.构造函数里面的this

function f(){
   console.log(this); //f {}
   this.name = "ynqc";
}
var a = new f();
a.bb = "hello";
console.log(a); //f {name: "ynqc", bb: "hello"}
console.log(a.name); //ynqc

由于new关键字可以改变this的指向，将这个this指向对象a（new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空对象替代）。

5.构造函数，this遇到return

function f() {
   this.name = "ynqc";
     // return {}; // undefined
     // return function () {}; // undefined
     // return 8; // ynqc
     // return "ynqc"; // ynqc
     // return undefined; // ynqc
     // return null; // ynqc
     // return false; // ynqc
     return true; // ynqc
 }
 var a = new f();
 console.log(a.name);

注：在严格版中的默认的this不再是window，而是undefined

javascript this指向初探

猜你喜欢