关于this的理解

this是call的第一个参数

this是call的第一个参数

this是call的第一个参数

看几个栗子吧

示例1：

var obj = {
  foo: function(){
    console.log(this)
  }
}

var bar = obj.foo
obj.foo() // 打印出的 this 是 obj
bar() // 打印出的 this 是 window

理解：

obj.foo()
//等价于
obj.foo.call(obj)
//因此this是obj

bar()
//等价于
bar.call(undefined)
//因此this是window

//当传入的上下文是null或undefined时，浏览器默认this就是window，严格状态下是undefined

示例2

button.onclick = function(){
  console.log(this)  
}

//this是button


button.addEventListener('click',function(){
   console.log(this) 
})

//this是button


$('ul').on('click','li',function(){
   console.log(this) 
})

//this是li
//li是selector

关于onclick事件中的this：

MDN：处理器的this值是触发事件的元素

关于addEventListener事件中的this：

MDN：为一元素注册此事件，句柄里的this就是该元素的引用

关于jQuery的on事件中this

文档：对于直接事件而言，this 代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector 相匹配的元素

示例3

function X (){
  return object = {
      name:'object',
      f1(x){
            x.f2()
        } ,
      f2(){
            console.log(this)  //A
        }
    }
}

var options = {
  name:'options',
  f1(){},
  f2(){
        console.log(this)  //B
    }      
}

var x = X()
x.f1(options)

//最终是B被调用，this是options

理解：

 示例4

function X (){
  return object = {
      name:'object',
      f1(x){
            x.f2.call(this)
        } ,
      f2(){
            console.log(this)  //C
        }
    }
}

var options = {
  name:'options',
  f1(){},
  f2(){
        console.log(this)  //D
    }      
}

var x = X()
x.f1(options)

//最终是D被调用，this是object

 此处call会改变this的指向

 理解：

 示例5

function X (){
  return object = {
      name: 'object',
      options: null,
      f1(x){
            this.options = x
            this.f2()
        } ,
      f2(){
            this.options.f2.call(this) //C
        }
    }
}
var options = {
  name: 'options',
  f1(){},
  f2(){
        console.log(this)  //D
    }      
}
var x = X()
x.f1(options)

//最终是D被调用，this是object

理解：

好了，有点晕，总结一下吧：

函数在被调用的时候会有产生一个新的this

1.普通函数在全局环境中被调用

全局环境中，一般，this指向window

var a= 'aaa';
function fn() {
    console.log(this); //window
    console.log(this.a); //aaa
}

fn();

//fn() 就是window.fn()

2.函数作为对象的属性被调用

此时this指向的就是这个对象

let name='aaa'
let per = {
  name:'bbb',
  say:function(){
        console.log(this.name) //这边的this就是per
    }
}

let sayName = per.say

per.say() //bbb
sayName () //aaa

另外一个示例：

let per1 = {
    name:'aaa',
    say: function(){
            console.log(this.name)
        }
}

let per2 = {
    name: 'bbb'
    say: per1.say
}

per2.say() //bbb


//理解成：

let per1 = {
    name:'aaa',
    say: function(){
            console.log(this.name)  //此处输出 bbb
             console.log(this           // 此处this是per2 
        }
}

let per2 = {
    name: 'bbb'
    say: per1.say
}

per2.say() //bbb

另外一个示例：

在作为对象的函数方法中再定义函数，this会变为window

let name = 'aaa'
let per = {
  name: 'bbb'
  say: function(){
        function fn (){
            console.log(this) //此处this是window
            console.log(this.name) //输出aaa
        }
        fn()
    }    
}    

per.say()

控制this指向，使得this指向per

let name = 'aaa'
let per = {
  name: 'bbb'
  say: function(){
        let that = this
        function fn (){
            console.log(that ) //此处this是per
            console.log(that .name) //输出bbb
        }
        fn()
    }    
}    

per.say()

3.在构造函数被调用时，this代表new出来的实例对象

function Per (name){
    this.name=name
    console.log(this) //Per {name: "aaa"}
}

let per = new Person('aaa')
console.log(per.name)



function Per (name){
    this.name=name
    console.log(this) //window
}

Person('bbb')

贴一个例子

这里new出来的实例对象，这个this就是不一样的。

贴两个精髓文章

this 的值到底是什么？

你怎么还没搞懂 this？

this的值是动态的，具体情况具体分析吧，说是谁调用谁就是this，也会有一些特殊情况，多踩坑，多学习。

待补充待补充待补充......