【js】《JavaScript设计模式与开发实践》——this的指向

王晗发布于2019-08-26 11:51 / 358人阅读

摘要：区分构造器是否显式地返回一个类型的对象例如不显式返回对象小阔爱宝批龙小阔爱以及显式返回对象小阔爱宝批龙宝批龙或调用跟普通函数相比，这种方式可以动态改变传入函数的例如小阔爱宝批龙小阔爱宝批龙

在js中，this总是指向一个对象，具体要看那个对象在运行时函数的执行环境（动态绑定），即“函数在谁那被调用，this就指向谁”。

1、在对象的方法内调用——指向该对象

例如

var obj = {
    name: "小阔爱",
    getName: function () {
        console.log("this === obj?", this === obj);
        console.log("this.name=", this.name);
    }
};
obj.getName(); // "小阔爱"

2、在普通方法内调用——指向全局对象window

例如

window.name = "小阔爱";
var getName = function () {
    return this.name;
};
console.log("getName=", getName()); // 小阔爱

或者

window.name = "小阔爱";
var obj = {
    name: "宝批龙",
    getName: function () {
        return this.name;
    }
};
var getName = obj.getName;
console.log("getName=", getName()); // 小阔爱

或者——当函数里面嵌套函数时，指向window

window.id = "xiaokuoai";
document.getElementById("baopilong").onclick = function () {
    console.log("this.id=", this.id); // "baopilong"
    var newFun = function () {
        console.log("this.id=", this.id); // "xiaokuoai"
    }
    newFun();
};

注意：在ES5的strict模式下，普通函数内的this被规定为不会指向window，而是undefined

例如

function func () {
    "user strict"
    console.log("this=", this); // undefined
}
func()

3、构造器调用（被new运算符调用）

当函数被new运算符调用时，该函数总会返回一个对象。

例如（一般情况）

var obj = function () {
    this.name = "小阔爱";
};
var newObj = new obj();
console.log("newObj.name=", newObj.name); // "小阔爱"

特殊情况：(函数有返回值的情况)
如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。（区分构造器是否显式地返回一个object类型的对象）

例如（不显式返回object对象）

var obj = function () {
    this.name = "小阔爱";
    return "宝批龙";
};
var newObj = new obj();
console.log("newObj.name=", newObj.name); // "小阔爱"

以及（显式返回object对象）

var obj = function () {
    this.name = "小阔爱";
    return {
        name: "宝批龙"
    };
};
var newObj = new obj();
console.log("newObj.name=", newObj.name); // "宝批龙"

4、call或apply调用

跟普通函数相比，这种方式可以动态改变传入函数的this

例如

var obj1 = {
    name: "小阔爱",
    getName: function () {
        return this.name;
    }
};
var obj2 = {
    name: "宝批龙"
};
console.log("obj1.getName=", obj1.getName()); // "小阔爱"
console.log("obj1.getName.call(obj2)=", obj1.getName.call(obj2)); // "宝批龙"

私有云云服务器 this的指向 javascript基础与实践教程 javascript的this 改变this指向

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107694.html

javascript设计模式与开发实践（二）- 封装和原型模式

摘要：对象会记住它的原型给对象提供了一个名为的隐藏属性，某个对象的属性默认会指向它的构造器的原型对象，即。我们通过代码来验证再来实际上，就是对象跟对象构造器的原型联系起来的纽带切记这句话，对未来理解原型链很有帮助。封装封装数据在许多语言的对象系统中，封装数据是由语法解析来实现的，这些语言也许提供了 private、public、protected 等关键字来提供不同的访问权限。例如：j...

luxixing 2019-08-22 15:05 评论0 收藏0
JavaScript设计模式与开发实践 | 02 - this、call和apply

摘要：构造器的外表跟普通函数一样，他们的区别在于被调用的方式。即，使用运算符创建对象时，就是将函数当作构造器调用。本节内容为设计模式与开发实践第二章笔记。 this JavaScript的this总是指向一个对象，至于指向哪个对象，是在运行时基于函数的执行环境的动态绑定的，而非函数被声明时的环境。 this的指向 this的指向大致可以分为以下4类：作为对象的方法调用作为普通函数调用 ...

darryrzhong 2019-08-21 10:45 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0