浅谈js中的this

GHOST_349178 发布于2019-08-20 18:27 / 3239人阅读

摘要：相信很多刚刚学习的新手都会有同感，当看一段代码时，发现里面有很多，但是这些到底是指向哪里却没有那么清楚，为了搞清楚这些到底是什么情况，特地花点时间总结如下几点最普遍的表示全局对象表示全局对象输出为解析设置全局变量初始值为，当调用函数之后改变

相信很多刚刚学习js的新手都会有同感，当看一段js代码时，发现里面有很多this，但是这些this到底是指向哪里却没有那么清楚，为了搞清楚这些this到底是什么情况，特地花点时间总结如下几点：
1.最普遍的this表示全局对象

 // 1.this表示全局对象
    var x = 1
    function test1(){
        this.x = 2;
        console.log(this.x);
    }
    test1();//输出为2

解析：设置全局变量x初始值为1，当调用函数test1()之后改变全局变量x的初始化值，故为2

2.对象方法中的this(这里this就指这个上级对象)
例1：

  var name = "全局this";
    var object = {
        name : "对象中this",
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
    console.log(object.getNameFunc()());//输出：全局this

例2：

 var name = "全局this";
    var object = {
        name : "对象中this",
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name;
            };
        }
    };
    console.log(object.getNameFunc()());//输出：对象中this

例3

 var name = "全局this";
    var object = {
        name : "对象中this",
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name+","+this.name;
            };
        }
    };
    console.log(object.getNameFunc()());//输出：对象中this,全局this

例4

function test2(){
       console.log(this.y);
   }
    var obj = {};
    obj.y = 2;
    obj.func= test2;
    obj.func();//输出2

解析：在例1中，直接this调用全局，而在例2中this表示函数的上一级对象，故此时的this是对象object；在例4中test2函数被赋值给对象obj，所以此时的this表示对象obj

3.构造函数调用（实际上也可以理解成是一个对象，跟2中一样）

 var a = 1;
     function test3(){
         this.a = 2;
     }
     var gz = new test3();
     console.log(a);//输出1
     console.log(this.a);//输出1
    console.log(gz.a);//输出2

解析：当new test3()弄成一个新的对象的时候，test3里面的this指向的是gz,所有全局变量没有变化

云服务器 GPU云服务器 js中的this js中的this机制 js中的this与html javaScript中的this

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

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

浅谈JS中的构造函数、原型对象(prototype)、实例中的属性/方法之间的关系

摘要：同时给该构造函数自动添加一个属性，该属性为指针，指向原型对象。总结构造函数中的属性和方法仅为声明和定义，一旦实例化工作完成后。实例对象自身的属性和方法与构造函数将不在存在关联关系。构造函数：函数中的一种，通过关键字new可以创建其实例。为了便于区分，通常首字母大写；原型对象：一种特殊的对象，构造函数创建时即自动生成；与构造函数形成一一对应，如同人和影子般的关系；实例：通过构造函数实例...

kevin 2019-08-23 12:56 评论0 收藏0
js面向对象浅谈（三）

摘要：还有一个问题，就是不能在创建子类性时，像父类型的构造函数传递参数。组合继承将原型链和借用构造函数组合到一起，发挥两者之长的一张继承模式，下面来看个例子。组合继承最大的问题是无论在什么情况下，都会调用两次父类型构造函数。继承继承是面向对象语言中特别重要的概念，js的继承主要是靠原型链实现的。原型链！！！看到我给标题打了三个叹号吗，这里真的很重要！这里真的很重要！这里真的很重要！j...

awkj 2019-08-20 17:20 评论0 收藏0
浅谈细说 JS 函数(call,apply,重载)

摘要：什么是函数引用的原话函数是一组可以随时随地运行的语句。函数是由这样的方式进行声明的关键字函数名一组参数，以及置于括号中的待执行代码。什么是函数？引用 W3School 的原话: 函数是一组可以随时随地运行的语句。函数是 ECMAScript 的核心。函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。函数的基本语法是这样的：...

U2FsdGVkX1x 2019-08-21 10:42 评论0 收藏0
浅谈Vue.use

摘要：并且接收的参数的限制是两种类型。对于这两种类型有不同的处理。之后给这个插件添加至已经添加过的插件数组中，标示已经注册过最后返回对象。还有一种则是将所有逻辑都编写成一个函数暴露给。个人觉得第一种方式比较合理。先举个? 我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这...

MingjunYang 2019-08-21 17:55 评论0 收藏0
浅谈js中reduce方法

摘要：介绍方法接收一个函数作为累加器为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数初始值上一次回调的返回值，当前元素值，当前索引，原数组。介绍reduce reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当...

mingzhong 2019-08-26 10:40 评论0 收藏0