js中this由来

这篇文章主要是讲述js中的this是什么？是怎么来的？

 

我们首先创建一个person对象，如下：

var person = {
    name: 'wyh',
    age: 22,
    sayHi: function (name, age) {
        console.log('你好，我是' + name + '，今年' + age + '岁')
    }
}

然后调用person.sayHi

person.sayHi(person.name, person.age)
//你好，我是wyh，今年22岁

我们得到了想要的结果，但是这个方式非常的麻烦

因为每次调用的时候sayHi方法的时候，都需要用person.xxx这样的方式传递我们需要的参数

而且person对象中的sayHi方法，需要设置相应形参与之对应

 

 

我们改进一下上面的传参方式

把self作为形参（当然也可以用其它变量名,但是self更加形象,表示自身）

然后把person对象作为实参传入，这样我们就不需要去管想要传递person的哪个属性，因为self得到了整个person对象

var person = {
    name: 'wyh',
    age: 22,
    sayHi: function (self) {
        // 可以通过打印看到 self就是传入的person对象
        // console.log(self);
        // Object { name: "wyh", age: 22, sayHi: sayHi() }
        console.log('你好，我是' + self.name + '，今年' + self.age + '岁')
    }
}

然后再次调用person.sayHi()

person.sayHi(person)
//你好，我是wyh，今年22岁

结果还是和我们期望的一致

 

 

但是这样还是有些麻烦，我们最想要的是直接把person也省掉

于是JS的作者加了一个语法糖，这样我们可以直接使用person.sayHi() 这样的调用方式了。

但是有一个问题，如果 person.sayHi() 没有实参，那person.sayHi 函数是如何接收到 person 的呢？

JS的作者选择了，隐藏形参 self，然后用关键字 this 来访问 self

 

于是我们的代码变成了下面这样：

var person = {
    name: 'wyh',
    age: 22,
    sayHi: function () {
        // this隐藏了，我们可以通过打印的方式来看一下
        // console.log(this);
        // Object { name: "wyh", age: 22, sayHi: sayHi() }
        console.log('你好，我是' + this.name + '，今年' + this.age + '岁')
    }
}

我们再次调用person.sayHi()

person.sayHi()
//你好，我是wyh，今年22岁

结果依然和原来一样，而且我们通过打印发现的确有this的存在，而且this就是我们的person对象

 

那这个this到底从哪里来呢?

其实在你调用 person.sayHi() 时候，这个this就会指向person这个对象。