深入JavaScript中的this对象

夕水

this 对象详解

this关键字是函数当中最重要的一个知识点。它在JavaScript中的表现也会有一些细微的不同,在严格和非严格模式之下也会有一些差别。

绝大多数情况下,this的指向由函数的调用方式决定。它不能被赋值,并且每次函数调用,它也有可能会不同。ES5引入了bind方法来设置函数的this值,而不需要考虑函数的调用方式,ES6的箭头函数不提供自身的this绑定,它的this由当前上下文决定。

    const obj = {
        name:"hello,world!",
        getName(){
            return this.name;
        }
    }
    console.log(obj.getName());//"hello,world!"

语法:

  this

它的值是当前上下文(global,function,eval)中的一个属性,在非严格模式下,它总是指向一个对象,而在严格模式下,它可以被设置成任意值。

描述

全局上下文

全局上下文即全局对象,例如在浏览器环境当中,this始终指的是window对象,不论是否是严格模式。来看如下一个示例:

    //在浏览器环境中,window对象就是全局对象
    console.log(this === window);//true

    //不用标识符定义一个变量,也会自动将该变量添加到window对象中,作为window对象的一个属性
    a = 250;
    console.log(this.a);//250

    this.message = "hello,world!";
    console.log(message);
    console.log(window.message);
    //都是打印的"hello,world!"
笔记:可以始终使用globalThis来获取一个全局对象,无论你的代码是否在当前上下文运行。
    var obj = {
        func:function(){
            console.log(this);
            console.log(globalThis);
        }
    }
    obj.func();//先打印obj对象,再打印window对象,浏览器环境中

函数上下文

在函数内部,this取决于它被调用的方式。例如以下的非严格模式下,没有手动去通过设置调用方式,并且是在全局环境下调用的,所以this指向全局对象。

  function fn(){
      return this;
  }
  //在浏览器环境中
  console.log(fn() === window);//true
  //在node.js环境中
  console.log(fn() === globalThis);//true

然而,在严格模式下,如果没有为this设置值,那么this会保持为undefined。如:

    function fn(){
        'use strict';
        return this;
    }
    console.log(fn() === undefined) //true
tips:上例中,因为fn是直接被调用的,也就是并不是作为对象的属性来调用(window.fn),所以this应是undefined,有些浏览器在最初支持严格模式的时候并没有正确的实现这个功能,所以错误的返回了window对象。

如果想要改变this值,需要使用callapply方法。如例:

    var obj = { value:"this is custom object!"};
    var value = "this is global object!";
    var getThis = function(){
        return this.value;
    }
    console.log(getThis());//"this is global object!"
    console.log(getThis.apply(obj))//"this is custom object!"
    console.log(getThis.call(obj))//"this is custom object!"

类上下文

尽管ES6的类和函数有些相似,this的表现也会类似,但也有一些区别和注意事项。

在类当中,this就是一个常规的类对象,类里面定义的非静态的方法都会被添加到this对象的原型当中。例:

    class Test {
        constructor(){
            const p = Object.getPrototypeOf(this);
            console.log(Object.getOwnPropertyNames(p));
        }
        getName(){}
        getValue(){}
        static getNameAndValue(){}
    }
    new Test();//["constructor","getName","getValue"]
tips:静态方法不是this的属性,它们只是类自身的属性。

比如,我们要调用以上的getNameAndValue方法,我们可以像如下这样调用:

    Test.getNameAndValue();
    //或者
    const test = new Test();
    test.constructor.getNameAndValue();

派生类

在派生类当中,不会像基类那样,有初始的绑定。什么是派生类?也就是继承基类的类。例如:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {}
//这里的test就是一个派生类

在派生类的构造函数当中,如果不使用super绑定this,则在使用this的过程中会报错Must call super constructor in derived class before accessing 'this' or returning from derived constructor。大致意思就是要有一个super绑定。如:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {
    constructor(){
        console.log(this);
    }
}
//ReferenceError

但是如果我们稍微改一下,如下:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {
    constructor(){
        super();//这时候会生成一个this绑定
        console.log(this);
    }
}
//Test,继承了基类的属性和方法,相当于执行this = new Base()

派生类不能在没有super方法的构造函数中返回一个除对象以外的值,或者说是有super方法的前面直接返回一个对象以外的值也是不行的,除非根本就没有构造函数。如:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {
    constructor(){
        return 1;
        super();
    }
}
//TypeError

但是下面的示例不会出错:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {
    constructor(){
        return {};
        super();
    }
}

下面示例会报错:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {
    constructor(){
        return 1;
    }
}
//TypeError

下面示例不会报错:

class Base {
    constructor(){
        this.key = "base";
    }
}
class Test extends Base {
    constructor(){
        return {};
    }
}

this和对象之间的转换

在非严格模式下,如果调用call或apply方法,传入的第一个参数,也就是被用作this的值不是一个对象,则会尝试被转换为对象。基本类型值,如null何undefined会被转换成全局对象,而像其他的基本类型值则会使用对应的构造函数来转换成对象。例如number类型数字1就会调用new Number(1),string类型'test'就会调用new String('test')。

例如:

function sum(c,d){
    return this.a + this.b + c + d;
}
var a = 3,b = 4;
var count = {
    a:1,
    b:2
}
//call方法后面的参数直接被用作函数的参数
console.log(sum.call(count,3,4));//10
console.log(sum.call(count,'3',4))//'334'
console.log(sum.call(null,3,4));//14
console.log(sum.call(undefined,'3',4));//'734'
console.log(sum.call(1,3,4));//new Number(1)上没有a和b属性,所以是this.a + this.b就是NaN,即两个undefined相加
console.log(sum.call('',1,'2'))//'NaN2'
//apply方法参数只能传数组参数
//TypeError
// console.log(sum.apply(count,3,4));
// console.log(sum.apply(count,'3',4))
// console.log(sum.apply(null,3,4));
// console.log(sum.apply(undefined,'3',4));
// console.log(sum.apply(1,3,4));
// console.log(sum.apply('',1,'2'))
//必须这样传
console.log(sum.apply(count,[3,4]));//10
console.log(sum.apply(count,['3',4]))//'334'
console.log(sum.apply(null,[3,4]));//14
console.log(sum.apply(undefined,['3',4]));//'734'
console.log(sum.apply(1,[3,4]));//new Number(1)上没有a和b属性,所以是this.a + this.b就是NaN,即两个undefined相加
console.log(sum.apply('',[1,'2']))//'NaN2'

再来看一个示例如下:

function test(){
    console.log(Object.prototype.toString.call(this))
}
console.log(test.call(7));//[object Number]
console.log(test.call(undefined));//[object global],在浏览器环境下指向为[Object window]
console.log(test.apply('123'));//[object String]

根据以上示例,我们就可以知道了利用Object.prototype.toString方法来判断一个对象的类型。如可以封装一个函数如下:

function isObject(value){
    return Object.prototype.toString.call(value) === '[object Object]';
}
//等价于
function isObject(value){
    return Object.prototype.toString.apply(value) === '[object Object]';
}
//等价于
function isObject(value){
    return {}.toString.call(value) === '[object Object]';
}
//等价于
function isObject(value){
    return {}.toString.apply(value) === '[object Object]';
}

bind方法

ES5引入了bind方法,该方法为Function的原型对象上的一个属性,在一个函数fn中调用fn.bind(object)将会创建一个和该函数相同作用域以及相同函数体的函数,但是它的this值将被绑定到bind方法的第一个参数,无论这个新创建的函数以什么方式调用。如:

function fn(){
    var value = "test";
    return this.value;
}
var obj = {
    value:"objName"
}
var newFn = fn.bind(obj);
console.log(fn.bind(obj)());//objName
console.log(newFn());//objName
var bindObj = {
    value:"bind",
    f:fn,
    g:newFn,
    h:fn.bind(bindObj)
}
var newBind = {
    a:fn.bind(bindObj)
}
console.log(bindObj.f());//bind
console.log(bindObj.g());//objName
console.log(bindObj.h());//undefined
console.log(newBind.a());//bind

箭头函数

在箭头函数中,this与封闭环境当中的上下文的this绑定一致,在全局环境中,那它的this就是全局对象。如:

var obj = {
    a:() => {
        return this;
    },
    b:function(){
        var x = () => { return this;};
        return x();
    }
}
console.log(obj.a());//global
console.log(obj.b());//obj
注意:无论使用call,apply还是bind其中的哪一种方法,都不能改变箭头函数的this指向,因为都将被忽略,但是仍然可以传递参数,理论上第一个参数设置为null或者undefined为最佳实践。

如:

    //在浏览器环境下globalObject是window对象
    let globalObject = this;
    let getThis = () => this;
    console.log(getThis() === globalObject);//true
    let obj = {
        getThis:getThis
    }
    console.log(obj.getThis() === globalObject);//true
    console.log(obj.getThis.call(obj) === globalObject);//true
    console.log(obj.getThis.apply(obj) === globalObject);//true
    // 使用bind并未改变this指向
    console.log(obj.getThis.bind(obj)() === globalObject);//true

也就是说,无论如何,箭头函数的this都指向它的封闭环境中的this。如下:

var obj = {
    a:() => {
        return this;
    },
    b:function(){
        var x = () => { return this;};
        return x();
    }
}
console.log(obj.a());//global在浏览器环境下是window对象
console.log(obj.b());//obj

作为某个对象

当调用某个对象中的函数中的方法时,在访问该函数中的this对象,将会指向这个对象。例如:

    var value = "this is a global value!";
    var obj = {
        value:"this is a custom object value!",
        getValue:function(){
            return this.value;
        }
    }
    console.log(obj.getValue());//"this is a custom object value!"

这样的行为方式完全不会受函数定义的方式和位置影响,例如:

    var value = "this is a global value!";
    var obj = {
        value:"this is a custom object value!",
        getValue:getValue
    }
    function getValue(){
        return this.value;
    }
    console.log(obj.getValue());//"this is a custom object value!"

此外,它只受最接近的引用对象的影响。如:

    var value = "this is a global value!";
    var obj = {
        value:"this is a custom object value!",
        getValue:getValue
    }
    obj.b = {
        value:"this is b object value!",
        getValue:getValue
    }
    function getValue(){
        return this.value;
    }
    console.log(obj.b.getValue());//"this is b object value!"

对象原型链中的this

在对象的原型链中,this同样也指向的是调用这个方法的对象,实际上也就相当于该方法在这个对象上一样。如:

   var obj = {
       sum:function(){
           return this.a + this.b;
       }
   }
   var newObj = Object.create(obj);
   newObj.a = 1;
   newObj.b = 2;
   console.log(newObj.sum());//3
   console.log(obj.sum());//NaN

上例中,newObj对象继承了obj的sum方法,并且我们未newObj添加了a和b属性,如果我们调用newObj的sum方法,this实际上指向的就是newObj这个对象,所以我们可以得到结果为3,但是我们调用obj.sum方法的时候,this指向的是obj,obj对象并没有a和b属性,所以也就是两个undefined相加,就会是NaN。obj就作为了newObj的原型对象,这也是原型链当中的一个非常重要的特点。

注意:Object.create()方法表示创建一个新对象,会以第一个参数作为新对象的原型对象,第一个参数只能为null或者新对象,不能为其它基本类型的值,如undefined,1,''等。

getter或setter中的this

在一个对象的setter或者getter中同样的this指向设置或者获取这个属性的对象。如:

   function average(){
       return (this.a + this.b + this.c) / 3;
   }
   var obj = {
       a:1,
       b:2,
       c:3
       get sum:function(){
           return this.a + this.b + this.c;
       }
   }
   Object.defineProperty(obj,'average',{
       get:average,
       enumerable:true,
       configurable:true
   });
   console.log(obj.average,obj.sum);//2,6

构造函数中的this对象

当一个函数被当做构造函数调用时(使用new关键字),this指向的就是实例化的那个对象。

注意:尽管构造函数返回的默认值就是this指向的那个对象,但是也可以手动设置成返回其它的对象,如果手动设置的值不是一个对象,则返回this对象。

如:

    function C(){
        this.a = 1;
    }
    var c1 = new C();
    console.log(c1.a);//1
    function C2(){
        var obj = {
            a:2
        }
        this.a = 3;
        return obj;
    }
    var c2 = new C2();
    console.log(c2.a);//2

在上例中实例化的c2的构造函数C2中,由于手动的设置了返回的对象obj,所以导致this.a = 3这条语句被忽略,从而得到结果为2,就好像"僵尸"代码。当然也不能算是"僵尸"代码,因为实际上它是被执行了的,只不过对外部没有造成影响,所以可以被忽略。

作为一个DOM事件处理函数

当函数是一个DOM事件处理函数,它的this就指向触发事件的元素(有一些浏览器在使用非addEventListener动态添加函数时不遵守这个约定)。如:

function changeStyle(e){
    console.log(this === e.currentTarget);//true
    console.log(this === e.target);//true
    //将背景色更改为红色
    this.style.setProperty('background',"#f00");
}

// 获取文档中所有的DOM元素
var elements = document.getElementsByTagName('*');

for(let i = 0,len = elements.length;i < len;i++){
    //为每个获取到的元素添加事件
    elements[i].addEventListener('click',changeStyle,false);
}

内联事件中的this

当在内联事件中调用函数时,this指向的就是这个元素。但只有最外层的代码才指向这个元素,如果是内部嵌套函数中没有指定this,则指向全局对象。如:

    <button type="button" onclick="document.writeln(this.tagName.toLowerCase())">clicked me</button> 
    <!-- 点击按钮会在页面中出现button -->
<button type="button" onclick="document.writeln((function(){return this})())">clicked me</button>
<!-- 在浏览器环境下页面会写入[object Window] -->

在类中更改this绑定

类中的this取决于如何调用,但实际上在开发当中,我们手动的去绑定this为该类实例是一个很有用的方式,我们可以在构造函数中去更改this绑定。如:

class Animal {
    constructor(){
        //利用bind方法让this指向实例化的类对象
        this.getAnimalName = this.getAnimalName.bind(this);
    }
    getAnimalName(){
        console.log("The animal name is ",this.animalName);
    }
    getAnimalNameAgain(){
        console.log("The animal name is ",this.animalName);
    }
    get animalName(){
        return "dog";
    }
}
class Bird {
    get animalName(){
        return "bird";
    }
}

let animal = new Animal();
console.log(animal.getAnimalName());//The animal name is dog;
let bird = new Bird();
bird.getAnimalName = animal.getAnimalName;
console.log(bird.getAnimalName());//The animal name is dog;

bird.getAnimalNameAgain = animal.getAnimalNameAgain;
console.log(bird.getAnimalNameAgain());//The animal name is bird;

在这个示例中,我们始终将getAnimalName方法的this绑定到实例化的Animal类对象上,所以尽管在Bird类中定义了一个animalName属性,我们在调用getAnimalName方法的时候,始终得到的就是Animal中的animalName属性。所以第二个打印仍然是dog

注意:在类的内部总是使用的严格模式,所以调用一个this值为undefined的方法会抛出错误。

打个广告,我在思否上线的课程玩转typescript1玩转typescript2适用于有一定基础的前端,还望大家多多支持,谢谢。

阅读 169

eveningwater
每天学习一点点,就可以进步一点点,工作能带来的不仅是技术知识点,还有与人的相处,沟通与交流。这是...

问之以是非而观其志,穷之以辞辩而观其变,资之以计谋而观其识,告知以祸难而观其勇,醉之以酒而观其性,临之以利而观其廉,期之以事而观其信。

2.9k 声望
194 粉丝
0 条评论
你知道吗?

问之以是非而观其志,穷之以辞辩而观其变,资之以计谋而观其识,告知以祸难而观其勇,醉之以酒而观其性,临之以利而观其廉,期之以事而观其信。

2.9k 声望
194 粉丝
宣传栏