Java教程

this 指向

本文主要是介绍this 指向,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
关于JS中的THIS的基本情况分析:
1.事件绑定
  DOM0: xxx.onxxx=function(){}
  DOM2: 
    xxx.addEventListener('xxx',function(){})
    xxx.attachEvent('onxxx',function(){})
  给当前元素的某个事件行为绑定方法「此时是创建方法,方法没执行」,当事件行为触发,浏    览器会把绑定的函数执行,此时函数中的this -> 当前元素对象本身
  document.body.addEventListener('click', function(){
    console.log(this);  //->body
  })
  特殊:基于attachEvent实现事件绑定,方法执行,方法中的this是window
  
2.函数执行「普通函数执行、成员访问、匿名函数、回调函数...」
  正常的普通函数执行:看函数执行前是否有“点”,有,“点”前面是谁this就是谁,没有“点”    ,this是window「严格模式下是undefined」
  
    function fn() {
      console.log(this);
    }
    let obj = {
      name: 'xiaoming',
      fn
    }
    fn();  //this->window/undefined
    obj.fn();  //this->obj
    (10, obj.fn)();  //this->window/undefined

  匿名函数:
    + 函数表达式:等同于普通函数或者事件绑定等机制
    + 自执行函数:this一般都是window/undefined
    + 回调函数:一般都是window/undefined,但是如果另外函数执行中,对回调函数的      执行做了特殊处理,以自己处理的为主
    
    (function(x) {
      console.log(this);  //->window/undefined
    })(10)    
    let arr = [10,20,30];
    arr.forEach(function(item, index) {
      console.log(this)  //->window
    });
  
    arr.forEach(function(item, index) {
      console.log(this)  //->forEach第二个参数「对象」,forEach内部做处理了
    },{xxx: 'xxx'});
    setTimeout(function(x){
      console.log(this, x);  //->window 10
    }, 1000, 10);

  括号表达式:小括号中包含“多项”,这样也只取最后一项,但是this受到影响(一般是wind    ow/undefined)
3.构造函数「构造函数中的this指向它的实例对象」
4.箭头函数「箭头函数中的this指向是捕获它本身所在上下文中的this」
5.基于call/apply/bind强制修改this指向
...

最后我们来看一道题
var x = 3,
    obj = {
      x:5
    };
obj.fn = (function(){
    this.x *= ++x;
    return function(y){
        this.x *= (++x)+y;
        console.log(x);
    }
})();    
var fn = obj.fn;
obj.fn(6); //13
fn(4); //234
console.log(obj.x, x);  // 95 234

欢迎您的观光,洗耳恭听您的宝贵意见!

 

这篇关于this 指向的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!