JavaScript “this“指向及习题

this指向

01 函数预编译过程（this --> window）

函数预编译过程中的this是指向window的。

实例如下：

//实例
function test(c) {
	var a = 123;
	function b() {}
}
test(1);

AO对象如下：

AO{
	arguments: [1],
	this: window,
	c: 1,
	a: undefined,
	b: function(){}
}

02 全局作用域里（this --> window）

在全局作用域里的this是指向window的。

GO对象如下：

GO{
	this: window
}

03 call/apply（改变函数运行时this指向）

3.1 定义和使用

（1）call 需要把实参按照形参的个数传进去
XXX.call(X,s1,s2,s3)
即 第一位(X)都是表明改变的指向，第二位及后面的位(s1,s2,s3···)是一个一个的实参。

（2）apply 需要传一个arguments
XXX.apply(X,[s1,s2,s3])
即 第一位(X)都是表明改变的指向，第二位是一个arguments，若数量多可以用数组代替。

（3）call和apply的作用和区别

• 作用，改变this指向
• 区别，后面传的参数形式不同（传参列表不同）

其实执行 函数(); 和执行 函数.call(); 是一样的，因为系统在后台会将 函数(); 自动变成 函数.call();

3.2 应用举例

call会让Person中的this值全部指向obj，即使用call可以理解为调用别人的函数实现自己的功能：

function Person(name, age) {
    // 即 this == obj
    this.name = name;
    this.age = age;
}
var person = new Person('deng', 100);
var obj = {}
Person.call(obj, 'cheng', 300); 
//call会让Person中的this值全部指向obj

04 谁.function()

function()里面的this指向“谁”，即谁调用的这个方法，this就指向的是谁。

实例如下：obj调用了a这个方法，所以a里面的this指向的是obj。

var obj = {
	a: function() {
		console.log(this.name)
	},
	name: "abc"
}
obj.a(); //obj调用了a这个方法，所以a里面的this指向的是obj

this习题

例题1

var name = '222';
var a = {
    name: '111',
    say: function () {
        console.log(this.name);
    }
}
var fun = a.say;
fun(); //222
a.say(); //111

var b = {
    name: '333',
    say: function (fun) {
        fun();
    }
}
b.say(a.say); //222
b.say = a.say;
b.say(); //333

例题2

var foo = 123; //此时的foo存储在widow中的

function print() {
    var foo = 456
    this.foo = 789; 
    // 因为没有对象调用函数，所以此时的this指向window，即覆盖了wido以前foo=123变成了foo=789
    console.log(foo); //456  即函数体中有foo为456
}
print();

修改例题2：（1）

var foo = 123;

function print() {
    this.foo = 789; 
    // 因为没有对象调用函数，此时的this指向window，即覆盖了wido以前foo=123变成了foo=789
    console.log(foo); //789   即此时的foo是window中的
}
print();

修改例题2：（2）

var foo = 123;

function print() {
    // 使用了new之后
    // var this = Object.create(print.prototype)
    // 即
    // var this = {
    //      foo: 789
    //      __proto__: print.prototype
    // }
    this.foo = 789;
    console.log(foo); //123   即此时的foo是window中的
}
new print();
// GO{
//      foo: 123
//      print: function() {}
// }        

例题3

var aa = 5;

function demo() {
    aa = 0;
    console.log(aa);
    console.log(this.aa);
    var aa;
    console.log(aa);
}
demo(); // 0 5 0
new demo(); // 0 undefined 0

个人笔记，欢迎大家交流探讨！