JS中this的指向题目

2024年5月16日 333次阅读 来源: dayday_up

头几天在牛客网上做题，碰到一道关于this指向的问题，之前就对this一孔之见的我霎时懵逼，下面我们来看看这道题，趁便解说一下js中this的指向问题。

问题：填写内容让下面代码支撑a.name = “name1”; b.name = “name2”;

function obj(name){
    _______
}
obj._____ = "name2";
var a = obj("name1");
var b = new obj;

在做这道题之前，我们先来进修一下this的学问。起首我们必需要邃晓的是，在javascript中this的指向是在函数被挪用时才肯定的，在定义时是不能够肯定的this指向的，正确一点说this终究指向的是挪用它的对象。下面我们举例说明：

1.作为零丁的函数被挪用

1    var name = "小黑";    // 全局变量name
2    function Func() {
3        var name = "明白";    // 局部变量name
    
4        console.log(this);
5        console.log(this.name);
6    }

8    Func();

9    console.log(window.Func() === Func())    //true

上面的代码中，当我们挪用Func()函数时，实际上Func()是作为window对象的要领被挪用的(第9行代码能够能够考证)，因而this指向的就是全局对象window，第4行代码打印出来的也就是window，第5行代码打印出来的天然也就是全局变量name(一切的全局变量都作为window的属性)。

2.作为对象的要领被挪用

照样先看下面的示例代码：

1    var Obj = {
2       name: "明白",
3        getName: function() {
4            console.log(this.name)
5        }
6    }

7    Obj.getName();           // 明白
8    window.Obj.getName();    // 明白

这段代码中getName()作为对象Obj的要领被Obj挪用，因而这个时刻this指向的就是Obj对象，天然this.name获得的就是”明白”。那末在第8行代码中window挪用了getName()为何不是指向window呢？由于window实际上是经由过程挪用Obj间接挪用getName()的，所以this照样指向直接挪用它的Obj。

3.作为组织函数被挪用

function Func() {
    this.name = "明白";
}

var fn = new Func();
console.log(fn.name)    // 明白

当我们经由过程new关键字组织一个实例对象的过程当中，组织函数中的this平常状况下指向我们组织出来的实例化对象(特殊状况背面有零丁解说)，因而在组织过程当中this.name = “明白”这句代码就相当于给实例对象fn建立了一个name属性并赋值”明白”。

运用apply()/call()转变this的指向

1    function getName() {
2        console.log(this.name);
3    }

4    var Obj = {
5        name: "明白"
6    }

7    getName.apply(Obj);    // 明白
8    console.log(Obj);    //{ name: "明白" }

这里用到了apply()要领转变this的指向(不知道apply()用法的自行百度)，第7行代码中我们能够明白成将getName()函数暂时绑定在Obj对象上作为Obj对象的要领，同时挪用这个要领。这个时刻getName()中的this就指向暂时挪用它的Obj对象了，天然this.name获得的就是”明白”。注重这里并没有转变Obj对象，如第8行代码所示。

末了要处理前面留下的题，我们还需要讲个学问点：当组织函数中的this碰到return时的状况。

//示例1
function Fn1() {
    this.name = "明白";
    return { name: "小黑" };    // 返回一个空对象
}
var fn1 = new Fn1();
console.log(fn1.name);    // 小黑

//示例2
function Fn2() {
    this.name = "明白";
    return true;    // 返回true
}
var fn2 = new Fn2();
console.log(fn2.name);    // 明白

你可能会新鲜，如出一辙的代码为何获得的值不一样呢？ 注重！这里两段代码是辨别的，示例1中函数返回值是一个对象，示例2中的返回值是true，当组织函数中返回值是一个对象时，this指向的就是返回的谁人对象，假如返回值不是对象时，返回值指向的就是组织函数的示例对象，因而实例1中的this.name获得的是小黑而不是明白。

如今我们就能够来做上面的题了：填写内容让下面代码支撑a.name = “name1”; b.name = “name2”;

     //建立全局函数
1    function obj(name){
2         if(name) {        // 辨别一般挪用和实例化挪用
            this.name = name;
          }
          return this;    // 返回this援用，挪用时this指向window
3    }

4    obj.prototype.name = "name2";    // 设置原型对象
5    var a = obj("name1");    //直接挪用函数，a即是window，name为window的属性。
6    var b = new obj;    //挪用函数实例化对象，this指向obj的实例化对象。

上面第4行代码涉及到对象原型的学问，假如对这方面另有疑问的能够看看我总结的另一篇文章：javaScript原型及原型链详解（一）

以上内容都是我个人的明白，不免会有明白不到位的处所，愿望列位不吝赐教！人人一同提高。

    原文作者：dayday_up
    原文地址: https://segmentfault.com/a/1190000009488332
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞