文档章节

js this的几种常见解决方案

罗布V
 罗布V
发布于 2017/08/11 00:43
字数 580
阅读 16
收藏 0

js this作用域笔记

预备知识

this(也称做上下文)在绝大多数情况下,函数的调用方式决定了this的值。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同. 可以通过下面的例子来进行理解。

function foo() {
    console.log(this);
}
//普通的函数调用
foo();//这里this绑定在window对象当中
//做为对象方法
var obj={bar:foo}
obj.bar();//这里的this绑定在obj对象当中
//构造函数
new foo();//this绑定在prototype继承的对象当中。

如何使用this

不使用this

我们在执行回调的时候会自动将this绑定到回调的函数当中,如果你想继续引用原有的this,你可以创建一个self将其指定this,在回调的函数当中通过self来访问原有的this对象。

function MyConstructor(data,transport){
    this.data=data;
    var self=this;
    transport.on('data',function(){
    console.log(self.data);
    });
}

**self是一个正常的变量,能够正确的支持词法的范围规则。通过这种方式的好处是仅可以访问外部的this对象,也可以正常访问回调函数的作用域。

显示设置回调函数的this

this看似是程序自动进行绑定的,其实在js当中提供了两个方法call()和bind()来显示的绑定this的作用域.

function MyConstructor(data,transport){
    this.data=data;
    var boundFunction=(function(){
        alert(this.data);
    }).bind(this);
    transportion('data',boundFunction);
}

通过上面的代码我们将this绑定在MyConstructor的作用域下,通过alert能够正常的打印data的数据。

通过es6的箭头函数

一个箭头函数表达式的语法比一个函数表达式更短,并且不绑定自己的 this,arguments,super或 new.target。

function MyConstructor(data,transport){
    this.data=data;
    transport.on('data',()=>alert(this.data));
}

高阶函数的this绑定

let array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])

上面的arr.map的函数说明,其中thisArg可选的。执行 callback 函数时 使用的this 值。

var arr=[1,2,3];
var obj={multiplier:42};
var new_arr = arr.map(function(v){
    return v*this.multiplier;
},obj);

上面的代码块我们将arr.map的this绑定到obj的对象当中,在map的回调函数可以通过this直接访问到obj的对象。

© 著作权归作者所有

上一篇: electron-安装篇
下一篇: mac 安装mqtt
罗布V
粉丝 13
博文 60
码字总数 47114
作品 0
温州
程序员
私信 提问
移动页面滚动穿透解决方案(荐)

移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案: 解决方案1:阻止冒泡。 全部代码附上: 解决方案2:通过 js 来做处理 首先,设置 body 元素 overflow:hidden 默认为隐藏。...

壹峰
2018/12/19
0
0
常见跨域解决方案以及Ocelot 跨域配置

常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的话,如果前端项目和api项目如果不是一个域名下的话往往会有跨域问题。今天来介绍一下我们在Ocelot网关配置...

WeihanLi
05/11
0
0
JS实现按钮onclick提交表单

1:在做ssm增删改查是遇到form表单提交问题 在input中设置了onclick=“addUser”事件,那么怎么提交了? 还有比如删除,修改也用js表示: 连接:https://blog.csdn.net/sinat41104353/artic...

小橙子的曼曼
03/14
0
0
scrollTop的兼容性小结

在页面上加上了 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 之后,document.body.scrollTop的值一直为0(在IE和FF下),网上......

老鸟的空间
2014/09/14
0
0
网页性能优化之异步加载js文件

一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件。在谈异步加载之前,先来看看浏览器加载js文件的原理。 浏览器加载 JavaScript 脚本,主要通过元素完成。...

酥风
2018/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
4
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
13
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部