JavaScript之this对象详解

Integ 发布于2019-08-22 13:56 / 3361人阅读

摘要：再来看一个小的示例淘宝腾讯淘宝为什么输出的依然是淘宝呢调用的是对象中的方法，方法里面有一个定时器，而定时器的一个参数是这里的指的就是的对象，然后方法里面有调用了，但是定时器中的指的是对象，所以最终调用的是对象中。

1.看前热身

看一段代码

上面的这段代码中 obj是JavaScript中的对象类型，对象就是属性和方法的集合。
如果执行obj.foo()函数的话，在控制台输出js。
其实this的定义就是，他是js对象中的一个特殊指针，他的指向根据环境的不同而发生改变。

2.this的指向

this的指向：谁调用或者哪个对象调用this所在的函数，this就指向谁。
构造函数的this和普通函数的this指向
构造函数的this

//构造函数和普通函数的this指向
    var  name = "淘宝";
    //构造函数
    function Foo() {
        this.name = "腾讯";
        this.aa = function () {
            console.log(this.name);
        } ;
    }
//    实例化对象
    var obj = new Foo();
    obj.aa();//腾讯

普通函数的this

var name = "淘宝";
function foo() {
    var name =  "腾讯";
    console.log(this.name);
}
foo(); //淘宝

在普通函数中，this指的是window对象，所以在这里输出的依然是‘淘宝’;
更深的一个函数的this

 var name = "淘宝";
    function Foo() {
        this.name = "腾讯";
        this.foo = function () {
            var name  = "百度";
            return function () {
                console.log(this.name);
            }
        }
    }
    var obj  = new Foo();
    obj.foo()();//淘宝

这个函数this的指向依然是window

3.定时器中的this指向

//    定时器中的this
    var name = "淘宝";
    function foo() {
        var name = "腾讯";
        console.log(this.name);
    }
//    定时器
    setTimeout(foo,1000) //淘宝

由此小案例可以看出定时器中的this指的是window对象。
再来看一个小的示例

var name = "淘宝";
var obj = {
    name :"腾讯",
    fn:function () {
        console.log(this.name);
    },
    foo:function () {
        setTimeout(this.fn,1000);
    }
};
obj.foo();//淘宝

为什么输出的依然是淘宝呢？
obj.foo()调用的是obj对象中的foo()方法，foo()方法里面有一个定时器，而定时器的一个参数是this.fn,这里的this指的就是obj的对象，然后fn()方法里面有调用了this.name，但是定时器中的this指的是window对象，所以最终this.name调用的是window对象中name。

在上面的示例中，把输出的‘淘宝’改成‘腾讯’

 var name = "淘宝";
   var obj = {
       name :"腾讯",
       fn:function () {
           console.log(this.name);
       },
       foo:function () {
           // setTimeout(this.fn.call(obj),1000);
           setTimeout(this.fn.bind(obj),1000);
       }
   };
   obj.foo();//腾讯

在this调用的时候添加bind或者call强制改变this的指向，在这里，指向了obj，所以输出的是obj.name，为‘腾讯’。

4.箭头函数的this

示例

var author = "lzz";
   var book = {
       author:"ql",
       init:function () {
           setTimeout(ev => {
               console.log(this.author);
           },1000);
       }
   };
   book.init();

箭头函数的特征就是定义在哪，this的指向在那。就是箭头函数定义在一个对象里面，那么箭头函数里面的this就指向该对象。

云服务器 GPU云服务器 javascript中this详解 javascript对象详解对象名this javascript的this

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

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

JavaScript深入浅出

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

blair 2019-08-21 18:26 评论0 收藏0
JavaScript系列之事件详解

摘要：响应某个事件的函数就叫事件处理程序或事件侦听器。为事件指定事件处理程序的方法主要有种。事件处理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。事件委托优点提高性能。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门事件 JavaScript与HTML之间的交互是通过事件实现的...

pakolagij 2019-08-21 17:16 评论0 收藏0
javascript技术难点（三）之this、new、apply和call详解

摘要：第四点也要着重讲下，记住构造函数被操作，要让正常作用最好不能在构造函数里 4) this、new、call和apply的相关问题讲解this指针的原理是个很复杂的问题，如果我们从javascript里this的实现机制来说明this，很多朋友可能会越来越糊涂，因此本篇打算换一个思路从应用的角度来讲解this指针，从这个角度理解this指针更加有现实意义。下面我们看看在ja...

ghnor 2019-08-21 10:27 评论0 收藏0
ES6之Object.assign()详解

摘要：另外，本文版权归原作者所有，翻译仅用于学习。因为值具有唯一性，这就意味着作为对象的属性名时，可以保证不会出现同名的属性。不过，这个提议在中被拒绝了，也许之后的版本会再考虑。事实上，与都有语法解决构造器中属性名重复的问题。译者按: 这篇博客将介绍ES6新增的Object.assign()方法。原文: ECMAScript 6: merging objects via Object...

niceforbear 2019-08-21 16:40 评论0 收藏0
JavaScript ES5之Object.create函数详解

介绍在创建对象的时候，我们有2种常用方法一个是文本标记法(var obj = {}),一种是运用Object函数进行对象的创建(new Object()). 但是这两种方式并不是创建的一个完完全全干干净净的对象,这里的干净只得是没有继承链. 幸运的是，ES5为我们提供了一种创建完全干净的对象的方法，Object.create函数,接下我将向大家介绍Obje...

zhaofeihao 2019-08-21 10:35 评论0 收藏0