[进修笔记] JavaScript中的 this

觉得上篇文章照样三四天前写的,看看日期已10天了。。时候过的真快!赶忙补篇,js中的this是我进修了但一向没来得及总结的,本日就扼要说说 this 吧~

this简述

每一个函数在被挪用时都邑自动获得两个特别的对象:thisargumentsarguments 是一个类数组对象,包含着传入函数中的一切参数, 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞