文章目录
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
个人笔记,欢迎大家交流探讨!