改变this 指向的3种方法
1.在函数内部声明一个that，然后将this赋值给that,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
<script>
const team={
members:["Herry","hrll"],
teamName:"Es6",
teamSummary:function() {
var that=this;
return this.members.map(function(member) {
return `${member}隶属于${that.teamName}`
})
}
}
console.log(team.teamSummary())
</script>
</html>
2.用bind方法，绑定外部的this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
<script>
const team={
members:["Herry","hrll"],
teamName:"Es6",
teamSummary:function() { return this.members.map(function(member) {
return `${member}隶属于${this.teamName}`
}.bind(this))
}
}
console.log(team.teamSummary())
</script>
</html>
3.直接使用箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
<script>
const team={
members:["Herry","hrll"],
teamName:"Es6",
teamSummary:function() { return this.members.map((member)=> {
return `${member}隶属于${this.teamName}`
})
}
}
console.log(team.teamSummary())
</script>
</html>
3个显示效果：
改变this 指向的3种方法的更多相关文章
- 【面试题】JS改变this指向的三种方法
一.this指向 点击打开视频讲解更加详细 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window 1.全局作用下 ...
- ES5中改变this指向的三种方法
ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...
- 改变this指向的三种方法
call.apply.bind三者为改变this指向的方法. 共同点:第一个参数都为改变this的指针.若第一参数为null/undefined,this默认指向window call(无数个参数) ...
- js 改变this指向的三种方法 bind call apply
先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...
- Linux 中改变主机名的 4 种方法
今天,我们将向你展示使用不同的方法来修改主机名.你可以从中选取最适合你的方法. 使用 systemd 的系统自带一个名为 hostnamectl 的好用工具,它可以使我们能够轻易地管理系统的主机名. ...
- html之改变图片透明度而不改变文字的透明度--两种方法实现
图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...
- unity 改变鼠标样式的两种方法
1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...
- Android 改变字体颜色的三种方法
在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下 1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...
- 改变javascript函数内部this指针指向的三种方法
在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. function a() { alert( ...
随机推荐
- Python第五节 元组
Python第八节 元组补充 元组从形式上看,和列表唯一不同的在于,列表是中括号,元组是小括号 元组内的元素不可更改 一. 创建 创建直接在小括号内写元素,用逗号隔开就好 创建空元祖只写一个小括号 元 ...
- 2018-2-13-win10-uwp-资源字典
title author date CreateTime categories win10 uwp 资源字典 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...
- 2018-8-10-WPF-DrawingVisual
title author date CreateTime categories WPF DrawingVisual lindexi 2018-08-10 19:16:53 +0800 2018-2-1 ...
- HashMap循环
1. Map的四种遍历方式下面只是简单介绍各种遍历示例(以HashMap为例),各自优劣会在本文后面进行分析给出结论. (1) for each map.entrySet() Java 1 2 ...
- 【Luogu】【关卡2-7】深度优先搜索（2017年10月）【AK】【题解没写完】
任务说明:搜索可以穷举各种情况.很多题目都可以用搜索完成.就算不能,搜索也是骗分神器. P1219 八皇后 直接dfs.对角线怎么判断:同一条对角线的横纵坐标的和或者差相同. #include < ...
- JavaWeb开发之一《Tomcat服务器的部署、安装及应用》
搬以前写的博客[2014-12-10 21:43] 这几天做了一个Java的程序,然后先把他搭载到Web上,于是学习了基于Tomcat服务器的web开发,这里回顾一下Tomcat服务器的搭建过程. 1 ...
- Ubuntu系统管理systemd
systemctl命令 systemctl list-units - 列出所有jobs/serviceList all units (where unit is the term for a job/ ...
- Go基础之基本数据类型
Go基础之基本数据类型 基本数据类型 整形 int8.int16.int32.int64 无符号整形:uint8.uint16.uint32.uint64 uint8就是我们熟知的byte型 类型 描 ...
- SCP-bzoj-1078
项目编号:bzoj-1078 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 斜堆有一个著名的性质:如果一个节点没有左子树,则它一定没有右子树,这也是它“斜堆”名称的由来. 此题通过给出斜堆来 ...
- js设计模式——3.观察者模式
js设计模式——观察者模式 /*js设计模式——.观察者模式*/ // 主题,保存状态,状态变化之后触发所有观察者对象 class Subject { constructor() { this.sta ...