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这个对象。