JavaScript 进阶第六章（this与函数的调用模式 ）

根据函数内部this的指向不同，可以将函数的调用模式分成4种

1. 函数调用模式

2. 方法调用模式

3. 构造函数调用模式

4. 上下文调用模式（借用方法模式）

函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window

function fn(){
  console.log(this); // 指向window 
}
fn();

方法调用模式

当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象

const obj = {
  sayHi:function(){
    console.log(this); // 在方法调用模式中，this指向调用当前方法的对象。
  }
}
obj.sayHi();

构造函数调用模式

如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

function Person(){
  console.log(this);
}
Person(); // 指向window 
var p = new Person(); // this指向Person

上下文调用模式 

也叫上下文模式,分为 apply 与 call

call

call方法可以调用一个函数，并且可以指定这个函数的this指向

  const RichWumon = {
      name: "海海",
      say: function () {
        console.log(this.name, " 你好呀");
      }
    }

    const obj = {
      name: "小陈"
    }

    RichWumon.say();            // 海海
    RichWumon.say.call(obj);    // 小陈

call应用

将伪数组转成数组

    let divs = document.querySelectorAll('div');
    console.log(divs);

    function change(nodelist) {
        console.log(Object.prototype.toString.call(nodelist));
        return Array.prototype.slice.call(nodelist);

    }

apply

就是apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表

    const RichWumon = {
      name: "海海",
      say: function () {
        console.log(this.name, "你好呀");
      }
    }

    const obj = {
      name: "小陈"
    }

    RichWumon.say();			// 海海
    RichWumon.say.apply(obj);	// 小陈

apply应用

1.简化 console.log方法

    // 简化log方法
    function log() {
        console.log.apply(console, arguments);
    }

bind方法

bind()方法创建一个新的函数, 可以绑定新的函数的this指向

var name = '海海';
function Fn(){
    this.age = 18;
    
    console.log(this.name + this.age);
}

Fn();			// 海海 18

// 返回值：新的函数
// 参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
let obj = {
    name:'小陈',
}
const newFn = Fn.bind(obj);
newFn();		// 小陈 18

this的指向

单独使用，this 指向全局对象

console.log(this); // window

函数中的 this 指向全局对象  

   function show(){
      console.log(this);  // window
    }

    show();

在函数内部，this 的指向在函数定义的时候是不能确定的，只有函数执行的时候才能确定  

    const a = 18;
    const obj = {
      a: 19,
      b: {
        a: 20,
        c: function () {
          console.log(this.a);  // 20
        }
      }
    }
    obj.b.c();

在方法中，this 指代该调用方法的对象  

const obj ={
    name:"海海",
    say:function(){
        console.log(this);        // {name:"海海"}
    }
}

箭头函数中的this指向

箭头函数自己没有this
箭头函数的this是确定的，且不变
箭头函数中的this指向  创建这个箭头函数所在对象 的上下文 

上一章：JavaScript 进阶第五章（原型）

下一章：JavaScript 进阶第七章（es6中的class ）