this指向的问题

最新推荐文章于 2021-05-08 10:30:45 发布

开水没有冬天

最新推荐文章于 2021-05-08 10:30:45 发布

阅读量142

点赞数

分类专栏：面试题 js基础

本文链接：https://blog.csdn.net/weixin_42995876/article/details/86632890

版权

js基础同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

面试题

6 篇文章 0 订阅

订阅专栏

参考：http://www.cnblogs.com/zxjwlh/p/6189051.html

1.全局中的this：
全局范围内的this将会指向全局对象，在浏览器中即使window。

console.log(this); // window

2.作为单纯的函数调用

function test() {
    this.age = 111;
}
test();
console.log(age); // 111

这里this指向了全局对象，即window。在严格模式中，则是undefined。

3.作为对象的方法调用

var name = "clever coder";
var person = {
    name : "foocoder",
    hello : function(str){
        console.log(this.name + " says " + str);
    }
}
person.hello("hello world"); // foocoder says hello world

this指向person对象，即当前对象。

4.作为构造函数

new FooCoder();

函数内部的this指向新创建的对象。

5.内部函数

var name = "clever coder";
var person = {
	name : "foocoder",
	hello : function(sth){
		var sayhello = function(sth) {
			console.log(this.name + " says " + sth);
		};
		sayhello(sth);
	}
}
person.hello("hello world");//clever coder says hello world

在内部函数中，this没有按预想的绑定到外层函数对象上，而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self：

var name = "clever coder";
var person = {
	name : "foocoder",
	hello : function(sth){
		var that = this;
		var sayhello = function(sth) {
			console.log(that.name + " says " + sth);
		};
		sayhello(sth);
	}
}
person.hello("hello world");//foocoder says hello world

6.使用call和apply设置this

person.hello.call(person, "world");

apply和call类似，只是后面的参数是通过一个数组传入，而不是分开传入。两者的方法定义：

call( thisArg [，arg1，arg2，… ] );  // 参数列表，arg1，arg2，...
apply(thisArg [，argArray] );     // 参数数组，argArray

两者都是将某个函数绑定到某个具体对象上使用，自然此时的this会被显式的设置为第一个参数。

当第一个参数是null或者undefined时，this指向window。

简单地总结

简单地总结以上几点，可以发现，其实只有第六点是让人疑惑的。

其实就可以总结为以下几点：

1.当函数作为对象的方法调用时，this指向该对象。

2.当函数作为淡出函数调用时，this指向全局对象（严格模式时，为undefined）

3.构造函数中的this指向新创建的对象

4.嵌套函数中的this不会继承上层函数的this，如果需要，可以用一个变量保存上层函数的this。

再总结的简单点，如果在函数中使用了this，只有在该函数直接被某对象调用时，该this才指向该对象。

obj.foocoder();
foocoder.call(obj, ...);
foocoder.apply(obj, …);

例子：
若this所在的函数体没有被对象调用，则this指向window（默认调用对象是window）。无论这个函数在哪，也无论这个函数体嵌套了多少层。eg：

//第一层
function test1(){
    console.log(this);  //window
    //第二层
    function test2(){
        console.log(this);  //window
        //第三层
        function test3(){
            console.log(this);  //window
            //第四层
            function test4(){
                console.log(this);  //window
            }
            test4();
        }
        test3();
    }
    test2();
}
test1();

var age = "global-age";
function person(name) {
    console.log(this); // window
    console.log(this.age); // global-age
    this.age = "son-age";
    console.log(this.age); // son-age
}
person(); // window

var age = "global-age";
function person(name) {
    console.log(this); // person{}
    console.log(this.age); // undefined
    this.age = "son-age";
    console.log(this.age); // son-age
}
var person1 = new person("wlh");

var age = 19;
function person(){
    var age = 20;
    this.age = 21;
}
console.log(age); // 19
person();
console.log(age); // 21

var person = {
    age:19
}
function person1(){
    var age = 20;
    this.age = 21;
    function person2(){
        var age = 22;
        this.age = 23;
    }
    person2();
}
console.log(person.age); // 19
person1.call(person);
console.log(person.age); // 21
console.log(age); // 23

参考2：
https://blog.csdn.net/liujie19901217/article/details/51297782

根据这个决策树我们需要进行两步判断：
1.函数调用是用new进行调用的吗？如果是,则this指向新创建的对象，否则，进入”否”分支;
2.判断该函数是否是用dot(.)进行调用的,如果是,则即进入”是”分支,即this指向dot(.)之前的对象;否则this指向全局对象window.

var obj = {
    a: 0,
    b: 0,
    say: function (a, b) {
        var sayA = function (a) {
            console.log(this); // 
            this.a = a;
        };
        var sayB = function (b) {
            console.log(this); // 
            this.b = b;
        };
        sayA(a);
        sayB(b);
    }
}
obj.say(1, 1);
console.log(obj.a + "--" + obj.b); // 0--0
console.log(window.a + "-----" + window.b); // 1-----1

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var person1 = new Person("lisi", 18);
console.log(person1.name); // lisi   this指向Person
var person2 = Person("wangwu", 12);
console.log(person2); // undefined   Person()执行 
console.log(window.name); // wangwu
console.log(person2.name);//Uncaught TypeError: Cannot read property 'name' of undefined

apply 和 call 这两个方法切换函数执行的上下文环境（context），即可以改变this指向。obj1.say.call(obj2,3,3)实际上是obj2.say(3,3),所以say中的this就指向了obj2

function Test(a, b) {
    this.a = a;
    this.b = b;
    this.say = function (a, b) {
        this.a = a;
        this.b = b;
    }
}
var obj1 = new Test(1, 1);
var obj2 = {a: 2, b: 2};
obj1.say.call(obj2, 3, 3);
console.log(obj2.a + "--" + obj2.b);// 3--3

说明：obj2可以调用obj1的say函数，且this指向obj2；

// 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。
var obj = {
    name: "wangwu",
    objInner: {
        name: "lisi",
        sayName: function () {
            console.log(this.name); //
        }
    }
};
obj.objInner.sayName();

// this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。
// 在这个例子中虽然函数sayName是被对象objInner所引用，但是在将sayName赋值给变量fn的时候并没有执行,所以this最终指向的是window对象。
var obj = {
    name: "wangwu",
    objInner: {
        name: "lisi",
        sayName: function () {
            console.log(this.name); // undefined
            console.log(this); // Window
        }
    }
}
var fn = obj.objInner.sayName;
fn();

当this碰到return

没有return的时候

function fn2() {
    this.username = "lisi";
    // return {};  // 没有return的时候
}
var obj = new fn2;
console.log(obj); // fn2 {username: "lisi"}
console.log(obj.username); // lisi

有return的时候：

function fn2() {
    this.username = "lisi";
    return {};
}
var obj = new fn2;
console.log(obj); // {}
console.log(obj.username); // undefined

function fn1() {
    this.username = '王五';
    return function () {};
}
var b = new fn1;
console.log(b); // function(){}
console.log(b.username); // undefined

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例 eg：

function fn() {
    this.username = '王五';
    return 1;
    // return undefined;
}
var a = new fn;
console.log(a);//fn {username: "王五"}
console.log(a.username); //王五

//虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊
function fn3() {
    this.username = '王五';
    return null;
}
var a = new fn3;
console.log(a); // fn3 {username: "王五"}
console.log(a.username); // 王五

参考：
https://blog.csdn.net/tom__cy/article/details/83045293

var num = 10;
var obj = {
    num: 8,
    inner: {
        num: 6,
        print: function () {
            console.log("num: " + num + " , this.num: " + this.num);
        }
    }
}
num = 888;
// 第一次执行
obj.inner.print(); // num: 888 , this.num: 6
// 第二次执行
var fn = obj.inner.print;
fn(); // num: 888 , this.num: 888
// 第三次执行
(obj.inner.print)(); // num: 888 , this.num: 6
// 第四次执行
(obj.inner.print = obj.inner.print)(); // num: 888 , this.num: 888

理解如下：

var num = 10;
var obj = {
    num: 8,
    print: function () {
        console.log(this);
        console.log("num: " + num + " , this.num: " + this.num);
    }
};
(obj.print)(); // num: 10 , this.num: 8   this:obj
(obj.print=obj.print)() // num: 10 , this.num: 10   this:window

var foo = 123;
function print() {
    this.foo = 789;
    console.log(foo);
}
print(); // 789

var foo = 123;
function print() {
    this.foo = 789;
    console.log(foo);
}
new print(); // 123

两个函数都执行：

var foo = 123;
function print() {
    this.foo = 789;
    console.log(foo);
}
print(); // 789
new print(); // 789

var a = 5;
function test() {
    a = 0;
    console.log(this); // 第一次：window；第二次： {}
    alert(a);
    alert(this.a);
    var a;
    alert(a);
}
// test(); // 0 5 0
new test(); // 0 undefined 0

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; 
console.log(b.say); // f(){console.log(this.name)}
b.say(a.say); // 333
b.say(); // 333

其他例子：

var name = "abc",
    person = {
        name: "kang",
        getName: function () {
            return function () {
                return this.name;
            };
        }
    };
console.log(person.getName()());

var obj = {prop: 37};
var prop = 111;
function independent() {
    return this.prop;
}
console.log(independent()); // 111
obj.foo = independent;
console.log(obj.foo()); // 37

function add(c, d) {
    return console.log(this.a + this.b + c + d);
}
var obj = {
    a: 1,
    b: 3
};
add.call(obj, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(obj, [10, 20]); // 1 + 3 + 10 + 20 = 34

var myObject = {
    foo: 'bar',
    func: function () {
        var self = this;
        console.log(this.foo); // bar
        console.log(self.foo); // bar
        (function () {
            console.log(this.foo); // undefined
            console.log(self.foo); // bar
        }())
    }
}
myObject.func();

// 普通函数
function foo() {
    console.log(this.id); // 42
    setTimeout(function () {
        console.log(this); // window
        console.log('id:', this.id); // 21
    });
}
var id = 21;
foo.call({id: 42}); // 21

// 箭头函数
function foo() {
    setTimeout(() => {
        console.log(this); // {id:42}
        console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 }); //42

上面的匿名函数定义时所在的执行环境就是foo函数，所以匿名函数内部的this执向始终会和foo函数的this执向保持一致，不会更改。

普通函数解释：定义时this指向函数foo作用域，但是在定时器100毫秒之后执行函数时，此时this指向window对象
箭头函数解释：this始终指向定义时所在对象，也就是始终指向foo作用域

参考：
https://www.cnblogs.com/dongcanliang/p/7054176.html