JS this - 83015010/js GitHub Wiki

参考资料:http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

一、this的含义:

this为js的一个关键字,函数创建时,内部自动生成的一个对象,只能在函数内部使用 那么this对象是谁呢?

一句话概括:this所在的函数被谁调用了,this就指向谁

二、this指向的几种情况

2.1 常规定义

    function Test() {
        this.number = 22;
        console.log(this.number);
    }

    Test();

Test()被window对象调用 即:window.Test(); 所以Test函数内的this指向window

上面的代码等同于:

    var number = 22;
    function Test() {
        console.log(this.number);
    }
    Test();

2.2 作为对象方法的调用

例如

   //定义一个User对象,有name和age属性,say指向speak方法
   var User = {
        name:"张三",
        age :22,
        say:speak,
    }
    
    //speak方法,输入调用函数中name和age属性
    function speak() {
        console.log('我叫: '+this.name+', 今年: '+this.age);
    }

    User.say(); //User对象调用speak,speak中的this指向User

2.3 作为构造函数使用

    var name = "李四";
    var age = 88;

    function Person() {
        this.name ='张三';
        this.age = 22;
    }

    var person = new Person(); 

    console.log('name= '+person.name+', age: '+person.age);
    console.log('name= '+name+', age: '+age);

//构造函数中的this指向函数对象person,而李四和88属性属于window,所以输出语句等同于:

console.log('name= '+person.name+', age: '+person.age);
console.log('name= '+window.name+', age: '+window.age);

输出结果:

name= 张三, age: 22
name= 李四, age: 88

2.4 apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

    //定义两个全局属性 name age ,属于window
    var name = "李四";
    var age = 88;

    function Person() {
        this.name ='张三';
        this.age = 22;

        //say函数打印出调用者的name和age属性
        this.say = function () {
            console.log('name= '+this.name+', age: '+this.age);
        }

    }

    var person = new Person();
    //构造函数 say里面的this指向person
    person.say(); // 等同于 person.say.apply(person);
    
    //apply的第一个参数指定调用者,如果为空,默认为全局对象window ,所以这里say里面的this指向window
    person.say.apply();//等同于 person.say.apply(window);

输出结果:

name= 张三, age: 22
name= 李四, age: 88