=>和this

lordharrd 发布于2019-08-21 11:44 / 1695人阅读

摘要：比如说有这么一段代码输出的结果是第一个输出的是确实指向了对象，但是第二个因为套了一个，所以这时候的就指向了函数本身。不过前段时间看过别人讲可以传递。当时不知道这有什么意义，现在看来确实是很好的一个特性。

比如说有这么一段代码：

var O = function(data){
  this.data = data
}
O.prototype.selfCall = function(data){
  if(data.length>1){
    data.forEach(function(e){console.log(this)})
  }else{
    console.log(this);
  }
}
var o = new O("test")
o.selfCall([1])
o.selfCall([1,2])

输出的结果是：

O { data: "test" }
{ DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  DTRACE_HTTP_SERVER_REQUEST: [Function],
  DTRACE_HTTP_SERVER_RESPONSE: [Function],
  DTRACE_HTTP_CLIENT_REQUEST: [Function],
  DTRACE_HTTP_CLIENT_RESPONSE: [Function],
  ...

第一个输出的this是确实指向了对象O，但是第二个因为套了一个function，所以这时候的this就指向了函数本身。
如果想用this指向O的话，可以这么写：

O.prototype.selfCall = function(data){
  n = this
  if(data.length>1){
    data.forEach(function(e){console.log(n)})
  }else{
    console.log(this);
  }
}

就是在函数外面用n存一下this，之后靠着函数的lexical（是这么说的么？）关系，拿外层的n来引用O。不过前段时间看过别人讲=>可以传递this。当时不知道这有什么意义，现在看来确实是很好的一个特性。所以上面的程序可以改成这样：

O.prototype.selfCall = function(data){
  if(data.length>1){
    data.forEach(e=>{console.log(this)})
  }else{
    console.log(this);
  }
}

总结：

function(){}里面的this指代的是function本身

可以通过lexical scope借助一个变量把外面的this传进function(){}

=>不仅仅让匿名函数的书写更简单，还有一个非常好的特性：this的传递

=>同时还会避免arguments指向匿名函数：参见回调+遍历

云服务器专线服务 html&ltbr&gt和 this[] this _this

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

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

JavaScript队列数据结构详解

　　今天我们讲讲JavaScript队列数据结构详解。什么是队列？　　队列是一种先进先出的数据结构，队列有两种操作：插入和删除；入队和出队。简单来说就是允许插入的一端称为队尾、允许删除的一端称为队头；　　如下图展示了栈这个数据结构：　　JavaScript中的队列　　要知道JavaScript中没有有关队列的数据模型，因此我们需要通过数组进行模拟，当数组中提供的push()和shift()选...

3403771864 2022-09-21 22:28 评论0 收藏0
vue用element来实现上传图片和修改图片功能

　　项目要求上传图片的模块，这个简单，但是要在保存图片后需要编辑就不怎么好处理了，现在就和大家一起分享。　　一、应用场景　　1.上传图片并进行放大预览　　2.图片上传代码　　就是直接将图片上传到接口，成功后返回图片路径，表单提交时，后台要路径拼成的字符串格式，类似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads...

3403771864 2022-11-28 22:07 评论0 收藏0
演示Vue实现记住账号密码功能的思路和代码

　　实现思路：　　情景：在用户登录时若勾选记住我功能选项，则将登录名和密码（加密后）存入本地缓存，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中。　　在本地缓存可以用cookies、localStorage、sessionStorage，但这些都有很多不同的差异，不多说废话。直接说使用我们的，在未设置过期时间，关闭浏览器窗口后就被清除了，显然是符合我们开发需求的，loc...

3403771864 2022-10-23 14:40 评论0 收藏0
JS手写bind之处理new的情况详解

　　你有遇见过给bind返回的函数做new操作的场景，本篇主要讲述的就是实现一下兼容new操作的bind写法，顺便学习一下new操作符，为大家提供下参考。　　大家可以去看下关于 JS 中 bind 方法的实现的文章，并给出了实现：　　Function.prototype.myBind=function(thisArg,...prefixArgs){ 　　constfn=this; 　　return...

3403771864 2022-11-19 22:09 评论0 收藏0
汇总有关JS对象的创建与继承

　　之前也有和大家讲过有关JS的对象创建和对象继承，本篇文章主要为大家做个汇总和梳理。　　JS中其实就是原型链继承和构造函数继承的毛病，还有就是工厂、构造、原型设计模式与JS继承。 JS高级程序设计4：class继承的重点，不只是简简单单的语法而已。　　对象创建　　不难发现，每一篇都离不开工厂、构造、原型这3种设计模式中的至少其一！　　那JS为什么非要用到这种3种设计模式了呢？？　　我们先从对...

3403771864 2023-03-27 18:33 评论0 收藏0
React父组件调用子组件中的方法实例详解

　　本文主要讲述ref 的应用仅为父组件调用子组件场景下的应用方式1　　Class组件　　1. 自定义事件　　Parent.js　　importReact,{Component}from'react'; 　　importChildfrom'./Child'; 　　classParentextendsComponent{ 　　componentDidMount(){ ...

3403771864 2022-09-14 22:01 评论0 收藏0