JavaScript学习--Item21 漂移的this

前端开发作者： 2024-08-25 19:25:01

而在 JavaScript 中，this 是动态绑定，或称为运行期绑定的，这就导致 JavaScript 中的 this 关键字有能力具备多重含义，带来灵活性的同时，也为初学者带来不少困惑。本文仅就这一问题展开讨论，阅罢本文，读者若能正确回答 JavaScript 中的 What ’s this 问


 var name="全局";
 function getName(){
     var name="局部";
     return this.name;
 };
 alert(getName());

alert(getName());

 var name="全局";
 var xpg={
     name:"局部",getName:function(){
         return this.name;
     }
 };
 alert(xpg.getName());

alert(xpg.getName());

var someone = {
    name: "Bob",showName: function(){
        alert(this.name);
    }
};

var other = {
    name: "Tom",showName: someone.showName
}

other.showName();　　//Tom

  var name="全局";
  var xpg={
      name:"局部",getName:function(){
          return function(){
              return this.name;
          };
      }
  };
 alert(xpg.getName()());

function (){
    return this.name;
};

  var name="全局";
  var xpg={
      name:"局部",getName:function(){
          var that=this;
          return function(){
              return that.name;
          };
      }
 };
 alert(xpg.getName()());

alert(xpg.getName());

function Person(__name){
    this.name = __name;        //这个this指向用该构造函数构造的新对象，这个例子是Bob对象
}
Person.prototype.show = function(){
    alert(this.name);   //this 指向Person，this.name = Person.name;
}

var Bob = new Person("Bob");
Bob.show();        //Bob

var name="全局";
var xpg={
    name:"局部"
};
function getName(){
    alert(this.name);
}
getName(xpg);
getName.call(xpg);
getName.call();

getName(xpg);

getName.call(xpg);

var name = "window";

var Bob = {
    name: "Bob",showName: function(){
        eval("alert(this.name)");
    }
};

Bob.showName();    //Bob

var name = "Tom";

var Bob = {
    name: "Bob",show: function(){
        alert(this.name);
    }
}

var show = Bob.show;
show();　　//Tom

var name = "window";

var Bob = {
    name: "Bob",showName: function(){
        alert(this.name);
    }
};

var Tom = {
    name: "Tom",showName: function(){
        var fun = Bob.showName;
        fun();
    }
};

Tom.showName();　　//window

var name = "Bob";  
var nameObj ={  
      name : "Tom",showName : function(){  
          alert(this.name);  
      },waitShowName : function(){  
          setTimeout(this.showName,1000);  
      }  
 };  

 nameObj.waitShowName();

<input id="btnTest" type="button" value="提交" onclick="alert(this.value))" />

<script type="text/javascript">
  function thisTest(){
  alert(this.value); // 弹出undefined,this在这里指向??
}
</script>

<input id="btnTest" type="button" value="提交" onclick="thisTest()" />

<input id="btnTest" type="button" value="提交" />

<script type="text/javascript">
  function thisTest(){
  alert(this.value); 
}
document.getElementById("btnTest").onclick=thisTest; //给button的onclick事件注册1个函数
</script>

document.getElementById("domID").onclick=thisTest; //给button的onclick事件注册1个函数。

<input id="btnTest1" type="button" value="提交1" onclick="thisTest()" />
<input id="btnTest2" type="button" value="提交2" />

<script type="text/javascript">
function thisTest(){
this.value="提交中";
}
var btn=document.getElementById("btnTest1");
alert(btn.onclick); //第1个按钮函数

var btnOther=document.getElementById("btnTest2");
btnOther.onclick=thisTest;
alert(btnOther.onclick); //第2个按钮函数
</script>

//第1个按钮
function onclick(){
  thisTest()
}

//第2个按钮
function thisTest(){
  this.value="提交中";
}

<input id="btnTest1" type="button" value="提交1" onclick="thisTest(this)" />
<input id="btnTest2" type="button" value="提交2" onclick="thisTest(this)" />
<input id="btnTest3" type="button" value="提交3" onclick="thisTest(this)" />
<input id="btnTest4" type="button" value="提交4" onclick="thisTest(this)" />

<script type="text/javascript">
  function thisTest(obj){
  alert(obj.value); 
}
</script>

//js事件 添加 EventUtil.addEvent(dom元素,事件名称,事件触发的函数名) 移除EventUtil.removeEvent(dom元素,事件触发的函数名)
var EventUtil = new eventManager();

//js事件通用管理器 dom元素 添加或移除事件
function eventManager() {
    //添加事件
    //oDomElement:dom元素,如按钮,文本,document等; ****** oEventType:事件名称(如:click,如果是ie阅读器,自动将click转换为onclick);****** oFunc:事件触发的函数名
    this.addEvent = function(oDomElement,oEventType,oFunc) {
        //ie
        if (oDomElement.attachEvent) {
            oDomElement.attachEvent("on" + oEventType,oFunc);
        }
        //ff,opera,safari等
        else if (oDomElement.addEventListener) {
            oDomElement.addEventListener(oEventType,oFunc,false);
        }
        //其他
        else {
            oDomElement["on" + oEventType] = oFunc;
        }
    }

    this.removeEvent = function(oDomElement,oFunc) {
        //ie
        if (oDomElement.detachEvent) {
            oDomElement.detachEvent("on" + oEventType,safari等
        else if (oDomElement.removeEventListener) {
            oDomElement.removeEventListener(oEventType,false);
        }
        //其他
        else {
            oDomElement["on" + oEventType] = null;
        }
    }
}