[学习笔记] JavaScript中的 this

xioqua 发布于2019-08-21 10:35 / 388人阅读

摘要：但是总有一个原则，那就是指的是调用函数的那个对象。还有另一个原则当没有明确的调用函数的那个对象时，指向全局对象，浏览器模式下就是了。设置的值这两个方法的作用都是在特定的作用域中调用函数，从而设置了函数体内的值。

感觉上篇文章还是三四天前写的，看看日期已经10天了。。时间过的真快！赶紧补篇，js中的this是我学习了但一直没来得及总结的，今天就简要说说 this 吧~

this简述

每个函数在被调用时都会自动取得两个特殊的对象：this 和 arguments，arguments 是一个类数组对象，包含着传入函数中的所有参数， this 引用的是函数据以执行的环境对象。

this 对象是在运行时基于函数的执行环境绑定的，它可能是全局对象或者其他的某个对象，随着函数的执行环境不同，this的值也会不一样。但是总有一个原则，那就是

this 指的是调用函数的那个对象。

还有另一个原则：当没有明确的调用函数的那个对象时，this指向全局对象global，浏览器模式下就是window了。

By default, this refers to the global object.

下面具体讲讲this 的指代原则。

this的指代原则 1. 函数直接被调用

此时函数属于全局性调用，其this代表全局对象global

var a = 5;

function test() {
    console.log(this.a);
}

test(); // 5

注意下面这种情况：

function f1(){
    console.log(this);
    function f2(){
        console.log(this);
    }
    f2();
}
f1();  // Window window

f2()输出的也是window，可见无论是在全局中直接被调用，还是内嵌在函数中被调用，只要是直接通过名字调用函数的，函数中的this在非严格模式下都是指向全局对象，而严格模式下就是undefined

2. 函数作为对象的方法调用

此时this指向这个对象。

function test() {
    console.log(this.a);
}

var obj = {};
obj.a = 5;
obj.m = test;
obj.m(); // 5

3. 函数作为构造函数调用

此时，this指向生成的新对象。

var a = 3; //全局变量a

function Test() {
    this.a = 5; // 对象属性a
}

var obj = new Test();
console.log(obj.a); // 5, 不是3！

4. 匿名函数中的this

匿名函数的执行环境具有全局性，因此，其this对象通常指向window。

var name = "The window";

var obj = {
    name: "My object",

    getName: function() {
        return function() {
            return this.name;
        };
    }
};

console.log(obj.getName()()); // "The window"

设置this的值 1. call() / apply()

这两个方法的作用都是在特定的作用域中调用函数，从而设置了函数体内this 的值。
apply() 方法接收两个参数：第一个参数是函数要运行的作用域，即对象。第二个参数是参数数组，既可以是Array的实例，也可以是arguments对象。call()和apply()的作用相同，二者唯一的差别就是接收参数的方式不同，即在使用call()方法时，传递给函数的参数必须逐个列举出来。
通过例子看call()/apply()是如何改变this值的。

window.color = "red";
var o = {color: "blue"};

function sayColor() {
    console.log(this.color);
}
sayColor.call(o); // blue

sayColor.call(window); // red
sayColor.call(this); // red
sayColor(); // red

2. bind()

该方法创建一个函数的实例，其this的值会被绑定到传给bind()函数的值。创建的新函数无论在哪里调用，this的值都是固定的。

window.color = "red";
var o = {color: "blue"};

function sayColor() {
    console.log(this.color);
}
var newSaycolor = sayColor.bind(o);
newSayColor(); // blue，全局中调用，结果仍为blue

需要注意的是，支持bind()方法的浏览器有 IE9+ 、Firefox 4+ 、 Safari 5.1+ 、 Opera 12+ 和 Chrome。

eval()

使用 eval() 方法时，this 指向哪里呢？
答案很简单，看谁在调用 eval() 方法，eval()中的this就是调用者的执行环境中的 this 。

这是我关于this的一点理解，欢迎大家拍砖~

参考文章：

Javascript的this用法
深入浅出 JavaScript 中的 this
Javascript中this关键字详解

云服务器 GPU云服务器 javaScript中的this javascript学习笔记 js中的this js中的this机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85810.html

重学前端学习笔记（十九）--JavaScript中的函数

摘要：方法在中定义的函数。这种声明方式会定义一个生成器函数，它返回一个对象。类用定义的类，实际上也是函数。调用函数时使用的引用，决定了函数执行时刻的值。表示当为时，取全局对象，对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

genefy 2019-08-26 13:49 评论0 收藏0
重学前端学习笔记（十九）--JavaScript中的函数

摘要：方法在中定义的函数。这种声明方式会定义一个生成器函数，它返回一个对象。类用定义的类，实际上也是函数。调用函数时使用的引用，决定了函数执行时刻的值。表示当为时，取全局对象，对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

lcodecorex 2019-08-30 10:55 评论0 收藏0
重学前端学习笔记（十九）--JavaScript中的函数

摘要：方法在中定义的函数。这种声明方式会定义一个生成器函数，它返回一个对象。类用定义的类，实际上也是函数。调用函数时使用的引用，决定了函数执行时刻的值。表示当为时，取全局对象，对应了普通函数。四操作的内置函数和可以指定函数调用时传入的值。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要...

LinkedME2016 2019-08-02 15:07 评论0 收藏0
重学前端学习笔记（八）--JavaScript中的原型和类

摘要：用构造器模拟类的两种方法在构造器中修改，给添加属性修改构造器的属性指向的对象，它是从这个构造器构造出来的所有对象的原型。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kai...

nanfeiyan 2019-08-02 16:16 评论0 收藏0