javascript this usage

转自1:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

 

this is a keyword in the Javascript language.

It represents an internal object automatically generated when the function runs and can only be used inside the function. for example,

  function test(){

    this.x = 1;

  }

The value of this changes depending on where the function is used. But there is a general principle that this refers to the object that called the function.

The following is divided into four situations, and the usage of this is discussed in detail.

Case 1: Pure function call

This is the most common usage of a function, which is a global call, so this represents the global object Global.

Take a look at the following code, it runs as 1.

  function test(){

    this.x = 1;

    alert(this.x);

  }

  test(); // 1

To prove that this is the global object, I make some changes to the code:

  var x = 1;

  function test(){

    alert(this.x);

  }

  test(); // 1

The result is still 1. Change it again:

  var x = 1;

  function test(){

    this.x = 0;

  }

  test();

  alert(x); //0

Case 2: Invocation as an object method

A function can also be called as a method of an object, in which case this refers to the superior object.

  function test(){

    alert(this.x);

  }

  var o = {};

  o.x = 1;

  o.m = test;

  man(); // 1

Case three is called as a constructor

The so-called constructor is to generate a new object (object) through this function. In this case, this refers to the new object.

  function test(){

    this.x = 1;

  }

  var o = new test();

  alert (ox); // 1

The result of running is 1. To show that this is not a global object at this point, I make some changes to the code:

  var x = 2;

  function test(){

    this.x = 1;

  }

  var o = new test();

  alert(x); //2

The running result is 2, indicating that the value of the global variable x has not changed at all.

Case four apply call

apply() is a method of the function object. Its function is to change the calling object of the function. Its first parameter represents the changed object that calls the function. Therefore, this refers to this first parameter.

  var x = 0;

  function test(){

    alert(this.x);

  }

  var o={};

  o.x = 1;

  o.m = test;

  o.m.apply(); //0

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改为

  o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o。

 

 

转自2:https://segmentfault.com/a/1190000002968751

 

this简述

每个函数在被调用时都会自动取得两个特殊的对象:this 和 argumentsarguments 是一个类数组对象,包含着传入函数中的所有参数, 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'

 

var name = 'The window';

var obj = {
    name: 'My object',

    getName: function() {
        var that = this; //将this赋值给变量,那么that就是执行object了
        return function() {
            return that.name;
        };
    }
};
console.log(obj.getName());//'My object'

设置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的一点理解,欢迎大家拍砖~

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=327006455&siteId=291194637