• javascript 中的 this 关键字详解


    1.javascript 中 什么是 this?
      this 指的是当前行为执行的主体,或者是当前方法执行的主体
      context:是当前行为或者方法执行的环境
      实例:
      xx 去北京饭店吃东西;上下文是“北京饭店”, this 是 xx

    2. 那么如何判断一个函数在执行的时候,函数体内的 this 关键字是谁呢?主要有以下几条规律:

          1)一个函数体内的 this 关键字和这个函数的在哪里定义,哪里执行都没有关系;

              2) 判断一个方法执行的时候,函数的执行主体是谁?主要看方法前面有没有点(.),如果函数执行的时候,函数前面有点 (.),点(.) 前面是谁,这个函数被执行的时候,函数体内的 this 关键字就是谁;

    且看代码:

     函数执行的时候,前面没有点的情况:

    function fn() {
        console.log(this.name);
    }
    window.name = 'windwo";
    fn();

    函数以 xx.fn的方式执行的时候:

    person = {
       name:'alice',
    }
    function fn(){
        console.log(this.name);
    }
    //给person 对象添加一个方法 person.fn
    = fn; person.fn();

              3) 自执行函数执行的时候,函数体内的 this 关键字永远是 window 对象(和自执行函数在哪里执行没有任何关系);

    window.name = 'window';
    function fn(){
     console.log(this.name);
    }
    var person = {
       name: 'alice',
      //匿名函数执行的时候, this 关键字指向 window
      // 匿名函数的执行结果:person 对象的 sayName属性指向 fn sayName:(
    function(){ console.log(this.name); return fn; })(), age:25 };
    //执行结果:输出 window ,alice person.sayName();

             4)给元素绑定的事件,事件触发的时候,被绑定到元素上的事件处理函数被执行的时候,函数的 this 关键字指向这个绑定事件的元素;

    var oDiv = document.getElementsById("div1");
    oDiv.onclick = fn;
    function fn(){
        console.log(this.id);//输出结果是 div1
    }

      如果上面都理解了,下面来看这个例子,加深下映像,看看是否都真正理解了 this 关键字:

    var number = 2;
    var obj = {
    number: 4,
    fn1: (function() {
    this.number *= 2;//window.number =4
    number = number * 2;//undefined
    var number = 3;//number =3
    return function() {
    this.number *= 2;
    number *= 3;
    alert(number)
    }
    })(),
    db2: function() {
    this.number *= 2;
    }
    }
    var fn1 = obj.fn1;
    alert(number);
    fn1();
    obj.fn1();
    alert(window.number);
    alert(obj.number);

      

  • 相关阅读:
    (转) Android的Window类
    android 打开文件
    Android线程优先级
    Hierarchy viewer problems
    android:windowSoftInputMode
    (转) Android 安全机制
    Mobl试用之helloword
    写给自己对软件测试经历的总结
    Mobl试用二
    黑马程序员面向对象基础:属性和方法
  • 原文地址:https://www.cnblogs.com/alicePanZ/p/4796760.html
Copyright © 2020-2023  润新知