js中this的使用

Posted 2020-10-25 上帝不是要你成功，而是让你去尝试

this一般指执行当前代码的所有者

 

 

一个小李子：

                

<script type="text/javascript">
  var name = "Kevin Yang";
  function sayHi(){
    alert("你好，我的名字叫" + this.name);
  }
  var person = {};
  person.sayHello = sayHi;
  person.sayHello();
script>

sayHi()   //Kevin Yang

person.sayHello()  //name is undefined

sayHi()函数中的this此时代表的window或者global  ,window下有name属性

person.sayHello()中的this代指的就是person对象了，person中无name属性

 

本文例句三种指针使用错误情况：

1.dom中的函数事件

<script type="text/javascript">
  function sayHi(){
    alert("当前点击的元素是" + this.tagName);
  }  
script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi()">


会报错，因为行数中的this此时指代的是window而不是dom


2.临时变量导致this丢失

<script type="text/javascript">
  var Utility = {
    decode:function(str){
      return unescape(str);
    },
    getCookie:function(key){
      // ... 省略提取cookie字符串的代码
      var value = "i%27m%20a%20cookie";
      return this.decode(value);
    }
  };
  alert(Utility.getCookie("identity"))
script>






这种写法是可以的但是一下写法就是错误的

<script type="text/javascript">
  function showUserIdentity(){
    // 保存getCookie函数到一个局部变量，因为下面会经常用到
    var getCookie = Utility.getCookie;
    alert(getCookie("identity"));
  }
  showUserIdentity();
script>
getCookie是一个临时变量，getCookie中的指针指代的是window,所以会报错

<script type="text/javascript">
  function showUserIdentity(){
    // 保存getCookie函数到一个局部变量，因为下面会经常用到
    var getCookie = Utility.getCookie;

 　　alert(getCookie.call(Utility,"identity"));
    //alert(getCookie.apply(Utility,["identity"]));

 } 
　　　　showUserIdentity(); 

script>

3.传参时导致指针丢失   注意，Javascript里面都是值传递的，没有引用传递的概念

<script type="text/javascript">
  var person = {
    name:"Kevin Yang",
    sayHi:function(){
      alert("你好，我是"+this.name);
    }
  }
  setTimeout(person.sayHi,5000);
script>


window.setTimeout中this指向window

  var boundFunc = person.sayHi.bind(person,person.sayHi);
  setTimeout(boundFunc,5000);