函數內部this的指向以及改變this指向

1、函數也是對象

• 函數的創建==>底層都是new關鍵字創建函數

  • 函數聲明：

    function sum(a,b) {
        console.log(a + b);
    }

  • 函數表達式：

    var sum = function sum(a,b) {
        console.log(a + b);
    }

  • new關鍵字創建函數：

    // 語法：var 變量名 = new Function ('形參1'，'形參2'，...，'函數體中的代碼')
    var sum = new Function('a','b','console.log(a + b)');
    sum(10,20);

     

     

2、函數內部this的指向

this的指向關鍵是看函數的調用方法

2.1 普通函數中this的指向

• this指向window

• 代碼：

  // 【在普通函數中this指向window】
  // function fn() {
  //   console.log(this);
  // }
  // fn();
  ​
  // var fn = function() {
  //   console.log(this);
  // };
  // fn();
  ​
  // (function(){
  //   console.log(this);
  // })();
  ​
  ​
  // function fn1() {
  //   function fn2() {
  //     console.log(this);
  //   }
  //   fn2();
  // }
  // fn1();

2.2 構造函數中this的指向

• this指向當前創建的對象----在內存中開辟的空間

• 代碼：

   // 【在構造函數中this指向當前創建的對象】
  function Student(name,age) {
      this.name = name;
      this.age =age;
  }
  // 原型中添加方法
  Student.prototype.sayHi = function() {
      console.log('我叫' + this.name);
  };
  ​
  var stu1 = new Student('張三',10);    // ==>this指向stu1
  var stu2 = new Student('李四',10);    // ==>this指向stu2

2.3 對象方法中的this指向

• this指向調用者

• 代碼：

  // 【在方法中，this指向調用者。  對象.方法（）】
  function Student(name,age) {
      this.name = name;
      this.age =age;
  }
  // 原型中添加方法
  Student.prototype.sayHi = function() {
      console.log('我叫' + this.name);
  };
  ​
  var stu1 = new Student('張三',10);    // ==>this指向stu1
  stu1.sayHi();   // ==>方法sayHi中的this指向stu1

2.4 定時器中this的指向

• this指向window

• 代碼：

  // 【在定時器中this指向windnow】
  setTimeout(function(){
     console.log(this);
  },5000);

2.5 事件處理程序中this指向

• this指向事件源

• 代碼：

  // 【在事件處理程序中，this指向事件源】
   document.onclick = function() {
      console.log(this);
   };

3、改變this的指向

3.1 call方法

• 語法：函數名.call(調用者，實參1...)

• 作用：函數被借用時，會立即執行，並且函數體內的this會指向調用者(借用者)

• 代碼：

   function fn(name, age) {
     this.name = name;
     this.age = age;
     console.log(this == obj);    //==>true
   }
  ​
   // 對象字面量
   var obj = {};
   fn.call(obj, '李四', 11);    //==>fn中的this指向obj

3.2 apply方法

• 語法：函數名.apply(調用者，[實參1，實參2,....]) ==>參數以數組的形式

• 作用：函數被借用是，會立即執行，並且函數體內的this會指向調用者(借用者)

• 代碼：

  function fn(name, age) {
     this.name = name;
     this.age = age;
     console.log(this == obj);    //==>true
   }
  ​
   // 對象字面量
   var obj = {};
   fn.call(obj, ['李四', 11]);  //==>fn中的this指向obj

3.3 bind方法

• 語法：函數名.bind(調用者，實參1....)

• 作用：函數被借用時，不會立即執行，而是返回一個新的函數。需要自己手動調用新的函數。

• 代碼：

  function fn(name, age) {
     this.name = name;
     this.age = age;
     console.log(this == obj);    //==>true
   }
  ​
   // 對象字面量
   var obj = {};
   var newFn = fn.bind(obj, '李四', 11);
   newFn();
  // fn.bind(obj, '李四', 11)();

3.4 使用

• 代碼：

  //  this指向window
  var name = 'window';
  var obj = {name = 'obj'};
  setTimeout(function(){
      console.log(this.name); //==>輸出window
  },2000)
  //  this指向obj
  var name = 'window';
  var obj = {name = 'obj'};
  setTimeout(function(){
      console.log(this.name); //==>輸出obj
  }.bind(obj),2000)   //  bind不會立即執行

• 偽數組借用數組的push方法實現增加

• 代碼：

  var arr = [10,20,30,40];
  //  arr.push(50);   //  push為數組中的方法
  var obj = {
      0:10,
      1:20,
      2:30,
      3:40,
      length:4
  }
  //  console.log(arr instanceof Array);  ==>true
  //  console.log(obj instanceof Array);  ==>false
  //  Array.prototype.push    ==>構造函數Array的原型中的push方法
  Array.prototype.push.call(obj,50);  //  ==>改變push中this指向為obj