黑马程序员技术交流社区

标题: 【广州前端】- JS中this的四种调用模式 [打印本页]

---

作者: AngularBaby    时间: 2017-12-7 15:41
标题: 【广州前端】- JS中this的四种调用模式


1. 直接调用模式

[JavaScript] 纯文本查看 复制代码

var foo = function(){

    console.log(this)

};

// 如果一个函数，是直接调用，与任何对象都没有关系时，这个调用，就是函数调用

// 函数调用模式中：this指的就是window

foo();  //  window

2. 方法调用模式（对象内部）

[JavaScript] 纯文本查看 复制代码

var obj = {

    foo:function(){            console.log(this)

        }

}

// 如果一个函数，是作为某个对象一个方法调用的(与某象相关联)，那么这种调用，就属于方法调用

// 方法调用模式中：this就指向了当前调用的对象

obj.foo();  // obj

3. 构造函数调用模式

[JavaScript] 纯文本查看 复制代码

var Person = function(){

    this.foo = function(){

         console.log(this);

     }

};

// 如果一个函数是配合new运算符，来使用的，那么该种就属于，构造函数调用

// 构造函数调用模式中：this指向new创建出来的新对象

var p = new Person();

p.foo();    // p

4. 上下文调用模式，也称借用方法

[JavaScript] 纯文本查看 复制代码

call/apply/bind 可以动态改变this的指向





var x = 100;

function fun(){

    console.log(this.x);

}

var obj = {};

obj.x = 200;

obj.fun = fun;



// 上下文调用模式中：this指向第一个参数，如果为空指向window

obj.fun.apply();         // 100    100是window中的x，说明this指向window



obj.fun.apply(obj);    // 200    200是obj中的x，说明this指向的是obj对象

5. this的问题的总结
遇到this指向问题时，先看有没有call、apply、bind
如果有，那么this指向 call、apply、bind 中第一个参数
如果没有，分析this所处的函数，究竟属于那种函数：
    1. 普通函数：this指向 window
    2. 对象内部方法： this指向对象
    3. 构造函数：this指向该构造函数实例出来的新对象


点击查看更多精彩前端资源

---

作者: AreYouGlad    时间: 2017-12-7 16:07

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2