this指向规律总结

this是状态机，是动态变化的对象，随着作用域的改变而改变 this伴随着作用域的产生而产生 一、首先看this在哪个作用域下，在全局中 this一律指向window

var name = 'aa' function fn(){ var name = 'bb' console.log(this.name) //bb fn的作用域是在全局中 所以指向window } fn()

二、在函数体中需要分情况

用new创建实例对象时，this的指向是new 实例的对象

function bar(name){ console.log(this) // 指向 new 实例的对象 this.name = name } var wyh = new bar('王宇航')

如果return 返回为对象、数组、函数 ，那么 this 就不指向 new 实例化的对象

function foo(){ // var age = 12 this.name = 'wyh'; console.log(this) // this 为 函数 非对象 return { name:'王宇航' } } var obj = new foo() console.log(obj)//this指向return的对象、数组、函数

普通函数调用，谁调用指向谁

var name = '小韩' function foo(){ var name = '小韩18'; var age = 18; console.log(this.name) } var person = { name:'aa', age:25, foo:foo, do:this.name // window } // 谁调用指向谁 仅看函数执行左边最近的对象是啥。 foo() //小韩 person.foo() //aa foo是被执行的

事件处理函数 在事件处理函数中this 指向的是【触发事件的元素】,不是绑定事件的元素

// 获取div 元素对象 并赋值给node var node = document.getElementsByTagName('div')[0] // 给node 绑定点击事件 node.onclick = function () { // 事件处理函数 console.log(this) }

构造函数 在构造函数中 this指向的是new实例化的对象

//注意：有return的函数一定不是构造函数 function Animal(type, name,color, eat) { //·创建构造函数 this.type = type; //this.对象 也是字符串 this.name = name; //给实例化的对象 添加属性 this.color = color; this.eat = eat; this.do = function(){ // 谁调用指向谁(指的是调用的对象) alert(this.name + '是' + this.color) } } var dog = new Animal('哺乳动物','狗','黑色',function(){ console.log('喜欢吃骨头') }) //实例化对象 new调用的函数就是构造函数

若有call apply bind，则根据它们的参数决定this的指向

var name = 'aa' var wzx = { name:'wzx', say:function(){ console.log(this.name) } } wzx.say.apply(this)// aa 指向window

总结

1: 先看 this 在哪个作用域中 全局—> this = window 如果在function 函数体中。 2：看函数执行。 2.0: 判断哪一个函数被执行？再看方法体中 this 指向谁？ 2.1 看是否有call apply bind ,有—> 参一是谁 this 就指向谁 2.2 看是否是事件处理函数； 是----> 触发事件元素 2.3 调用函数是否是new 是构造函数，this 指向new 实例的对象 2.4 以上都不满足。就是谁调用指向谁。