[进修笔记] JavaScript中的 this

2024年2月13日 226次阅读 来源: 梦禅

觉得上篇文章照样三四天前写的，看看日期已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关键字详解

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