javascript,对象方法this,看完这篇我不信你还不懂this
JavaScript的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
this的指向大致可以分为4类：
1、作为对象的方法调用
2、作为普通函数调用
3、构造器调用
4、function.prototype.call或function.prototype.apply调用
1、作为对象方法调用
当函数作为对象的方法被调用时，this指向该对象
var obj = {
a: 1,
getA: function () {
alert(this === obj) // true
alert(this.a) // 1
}
}
obj.getA()
2、作为普通函数调用
当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的this总是指向全局对象，在浏览器的javascript里，这个全局对象就是window对象
var name = 'lili'
var getName = function () {
console.log(this) // window
return this.name // lili
}
console.log(getName()) // lili
console.log(this) // window
或者看下面：
var name = 'lili'
var myObj = {
name: 'sevn',
getName: function () {
console.log(this）
return that.name
}
}
var getName = myObj.getName
console.log(getName()) // this指向window，返回lili
myObj.getName() // this指向myObj，返回sevn
还有一种情况比较困扰，比如div节点的事件函数内部，有一个局部的callback方法，callback被作为普通函数被调用的时候，callback内部的this指向了window，但是我们往往想让她指向该节点。
var id = 'window'
document.getElementById('div1').onclick = function() {
console.log(this, this.id, '01') //
var callback = function () {
console.log(this, this.id, '02') // window {} window 02
}
callback()
}
此时有一种简单的决绝方案，可以使用一个变量保存div节点的引用：
document.getElementById('div1').onclick = function() {
var that = this
var callback = function () {
console.log(that.id) // div1
}
callback()
}
在ECMAScript 5 的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined
function func () {
"use strict"
console.log(this) // undefined
}
func()
3、构造器调用
JavaScript中没有类，但是可以从构造器中创建对象，同时也提供了new运算符，使得构造器看起来更像一个类。
除了宿主提供的一些内置函数，大部分JavaScript函数都可以当作构造器使用。构造器的外表跟普通函数一模一样，它们的区别在于被调用的方式。当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this就指向返回的这个对象，见如下代码：
var myClass = function () {
this.name = 'ddd'
}
var obg = new myClass()
console.log(obg.name) // ddd
使用new购造器时还要注意一个问题，如果构造器也显式的返回了一个object类型的对象，那么此次运算的结果最终会返回这个对象：
var myClass = function () {
this.name = 'ddd'
return {
name: 'anan'
}
}
var obg = new myClass()
console.log(obg.name) // anan
如果构造器不显式的返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题：
var myClass = function () {
this.name = 'ddd'
return 'anan'
}
var obg = new myClass()
console.log(obg.name) // ddd
4、Function.prototype.call或Function.prototype.apply调用
跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态地改变传入函数的this：
var obj1 = {
name：’seve‘，
getName: function(){
return this.name
}
}
var obj2 = { name: 'anan' }
console.log(obj1.getName()) // seve
console.log(obj1.getName.call(obj2)) // anan
call和apply方法能很好地体现JavaScript的函数式语言特性，在JavaScript中，几乎每一次编写函数式语言风格的代码，都离不开call和apply。在JavaScript诸多版本的设计模式中，也用到了call和apply。
丢失的this
var obj = {
name：’seve‘，
getName: function(){
return this.name
}
}
console.log(obj.getName()) // seve, getName是作为obj对象的属性被调用的
var getName = obj.getName
console.log(getName()) // undefined, 当用另外一个变量来引用obj.getName，并调用该变量时，此时时普通函数调用方式，this指向全局的window，所以程序的知行结果时undefined
function makeUser() {
return { name: "John", ref: this }
}
let user = makeUser()
alert( user.ref.name ) // undefined
修正this
document.getElementById = (function(func){
return function () {
return func.apply(doucment, arguments)
})(document.getElementById )
var getId = document.getElementById
var div = getId('div1')
console.log(div.id) // div1
document.getElementById方法的内部实现中需要用到this。这个this本来被期望指向document，当getElementById方法作为document对象的属性被调用时，方法内部的this确实是指向document的。但当用getId来引用document.getElementById之后，再调用getId，此时就成了普通函数调用，函数内部的this指向了window，而不是原来的document。我们可以尝试利用apply把document当作this传入getId函数，帮助“修正”this：