js日常笔记之this

博客小小小菜鸟      2022-02-16     623

关键词:

在javascript中自己创建构造函数时可以利用this来指向新创建的对象上。这样就可以避免函数中的this指向全局了,如下

 var x = 2;
  function test(){
    this.x = 1;
  }
  var o = new test();
  alert(x); //2

 

反之,如果不使用new,只把上面那个函数当做一个普通函数来使用的话,函数内部的this就会指向全局对象,如下

 var x = 1;
  function test(){
    this.x = 0;
  }
  test();
  alert(x); //0

 

再之,如果把这个使用了this的函数放到一个对象当中,这个this会绑定到当前对象中,如下

var x=3;

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     this.x = this.x + x; 
     this.y = this.y + y; 
     } 
 }; 

point.moveTo(1, 1);

alert(point.x);//1
alert(x);//3

 综上看来,貌似function内部的this会找到最近的一个外层对象进行绑定,实在找不到对象就找window

然而,问题来了,如果是function内部的function使用this会怎样?如下:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
     // 内部函数
     var moveX = function(x) { 
     this.x = x;//this 绑定到了全局
    }; 
    // 内部函数
    var moveY = function(y) { 
    this.y = y;//this 绑定到了全局
    }; 

    moveX(x); 
    moveY(y); 
    } 
 }; 
 point.moveTo(1, 1); 
 point.x; //==>0 
 point.y; //==>0 
 x; //==>1 
 y; //==>1

这样做this不仅没有找到外层对象point,反而直接找上了全局变量,导致凭空生成了两个全局变量,好危险的情况啊!!!

解决办法是有,就是在函数内部把this保存到一个局部变量中,如下

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
      var that = this; 
     // 内部函数
     var moveX = function(x) { 
     that.x = x; 
     }; 
     // 内部函数
     var moveY = function(y) { 
     that.y = y; 
     } 
     moveX(x); 
     moveY(y); 
     } 
 }; 
 point.moveTo(1, 1); 
 point.x; //==>1 
 point.y; //==>1

所以说没两把刷子还真的不要随便去使用这个this,

 

后来接触到了es6,也就是俗称的下一代JavaScript,它给出了一个箭头函数“=>”.

看着箭头的简介和用法,貌似它就是一个function的简写嘛,反正看着特别不习惯,别扭!

比如说下面这个简单的箭头函数代码:

(a, b) => a + b

乍看,这是个表达式吧?哪里像个函数了,哪里像了?我这急性子,是谁吃饱了撑的想出这种简写的法子。。。

直到后来在介绍的最下面来了一句“箭头函数的 this 始终指向函数定义时的 this”,

也就是说,箭头函数里面的this再也不会变来变去了,即便是call和apply这两位也不能改变这个事实

var x = 1,
    o = {
        x : 10,
        test : () => this.x
    };

alert(o.x);//10
o.test(); // 1
o.test.call(o); // 依然是1

这个this是不会改变指向对象的

 

学习笔记—前端基础之构造函数与类(代码片段)

日常的学习笔记,包括ES6、Promise、Node.js、Webpack、http原理、Vue全家桶,后续可能还会继续更新Typescript、Vue3和常见的面试题等等。构造函数用new关键字来调用的函数,称为构造函数。构造函数中一般有两个属性,一个是原型上的... 查看详情

设计模式之观察者日常笔记(代码片段)

  最近在复习C#的基础知识,今天刚好看到了观察者模式,便想着在此留下个记录,方便日后复习。首先,概念性的东西百度上搜索有很多,这里就不拷贝黏贴了。下面将用今天看的一个猫和老鼠的例子讲解。1、添加一个... 查看详情

面向对象之笔记二——————原型与继承

原型与继承原型为什么需要原型?构造器创建对象的时候,实际上会有成员重复如果使用构造器this.方法名=function....方式创建对象.那么每一个对象对应的方法就会重复functionPerson(name){this.name=name;this.sayHello=function(){console.log(‘你好... 查看详情

学习笔记---js基础类

JavaScript中的this!https://qiutc.me/post/this-this-this-in-javascript.html#call,_apply,_bind讲解了JS中this在特殊情况下的变化。以及如何保持this值。  查看详情

学习笔记—前端基础之es6的数组(代码片段)

日常的学习笔记,包括ES6、Promise、Node.js、Webpack、http原理、Vue全家桶,后续可能还会继续更新Typescript、Vue3和常见的面试题等等。reduceletr=[1,2,3,4,5].reduce((total,num)=>returntotal+num)console.log(r);reduce()方法接收一个函数作为累加器,... 查看详情

js面向对象笔记二

菜单导航,《JS面向对象笔记一》, 参考书籍:阮一峰之《JavaScript标准参考教程》一、构造函数和new命令二、this关键字三、构造函数和new命令四、构造函数和new命令五、构造函数和new命令六、构造函数和new命令七、构造函数... 查看详情

工作笔记之selectinabap

日常开发过程中,最常用的语句可能就是查询语句了。那么如果从数据库表中查询数据呢?答:​​selectfrom​​语句。SELECT的三个部分在OPENSQL中,​​SELECT​​语句可以查询数据字典中定义过的数据库或者视图中的数据。常见... 查看详情

spring学习笔记之beandefinition

650)this.width=650;"src="https://s4.51cto.com/wyfs02/M01/A6/AE/wKioL1nYffSB5v6yAACuAjnwQ_8455.png"style="float:none;"title="2017-10-07_150932.png"alt="wKioL1nYffSB5v6yAACuAjnwQ_8455.png"/>650)this.wid 查看详情

浅析js之this---一次性搞懂this指向

  ES5函数调用三种形式:func(p1,p2)obj.child.method(p1,p2)func.call(context,p1,p2)//先不讲apply  前两种都是语法糖,可以等价地变为call形式:转换代码func(p1, p2) 等价于func.call(undefined, p1, p2) obj.child.method(p1 查看详情

oracle维护之日常伪dba操作(代码片段)

好记性不如烂笔头,本人日常DBA的SQL如下,整理了常用的,创建用户之类的就直接不写了,因为他不算日常的SQL,偶尔用一下,直接通过笔记调出来--查询当前用户所有表selectt.*fromuser_tablest--impdp导出impxxx/x... 查看详情

笔记探索js的this对象(第二部分)

了解this对象之后我们明白了this对象就是指向调用函数的作用域 那么接下来我们便要清除函数究竟在哪个作用域调用 找到调用的作用域首先要了解一下几点: 1、调用栈:调用栈就是一系列的函数,表明当前函数是由哪些上层函... 查看详情

javase学习笔记之封装

封装(面向对象特征之一):是指隐藏对象的属性和实现细节,仅对外提供公共访问方式。好处:将变化隔离;便于使用;提高重用性;安全性。封装原则:将不需要对外提供的内容都隐藏起来,把属性都隐藏,提供公共方法对... 查看详情

js基础笔记学习227练习3之2

查看详情

react学习笔记2之正确使用状态

//状态不要直接修改,比如://错的,这样写不会重新渲染组件this.state.comment=‘Hello‘;//修改状态正确的方式this.setState({comment:‘Hello‘});setState方法的参数可以接受一个对象,也可以接受一个回调函数,状态的修改可能是异步的,... 查看详情

js基础笔记学习226练习2之1

全选和反选 checked控制选中 查看详情

node.js学习笔记之写文件

node.js之写文件//---------------optfile.js------------------var fs= require(‘fs‘);module.exports={  writefile:function(path,data){  //异步方式    fs.writeFile 查看详情

日常手机可以连接网络笔记本连接不上

十分蛋疼昨天还好好的笔记本突然连接不上网络以为运营商问题发现手机能照常上网遂Google之找寻问题解决方案,答案是需要手动布置ip地址1.打开网络和共享中心,点击链接不上的网络名称2.点击详细信息,记录下信息3.点击属... 查看详情

node.js学习笔记之调用函数

本文件和从其它模块引入函数;从其他模块引入分只支持引入一个函数和多个 这两种例:test.js为主函数varhttp=require(‘http‘);http.createServer(function(request,response){response.writeHead(200,{‘Content-Type‘:‘text/html‘})func1(response);//调用... 查看详情