改变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( ...
随机推荐
- JS中Ajax的实现部分
2015-9-1 var url = "<%=servletName%>?user="+username.value+"&pwd="+pas ...
- maven管理多模块
创建parent项目: 1.打开IDEA,注意这里不要勾选模板,用模板创建过maven项目的小伙伴都知道模板创建项目非常慢,所以这里不要选模板,需要的文件夹我们后面自己来创建就可以了.所以这个页面直接 ...
- teb教程5
跟随全局规划器 简介:本部分是关于如何配置局部规划器严格跟随全局规划,也包括调节在时优和路径跟随上的权衡. 1.先看一下via-points当前的优化行为:启动下面节点 roslaunch teb_l ...
- android studio 设计任务内容和识别内容界面 (android stuido design task layout)
本人android studio版本是 3.4.1,设计了一个任务内容和识别内容的界面,欢迎大家品尝. 界面显示如下图所示: 实现代码如下: <?xml version="1.0&qu ...
- Java——类之间的关系
3.7 类之间的关系 3.7.1 泛化关系 类和类之间的继承关系及接口与接口之间的继承关系. 3.7.2 实现关系 类对接口的实现. 3.7.3 关联关系 类与类之间的连接,一个类可以知道另一个类的属 ...
- 使用HBuilder编辑器进行真机调试运行时提示Waiting for debugger！
在使用HBuilder编辑器创建mui项目进行真机调试的时候,手机总是提示Waiting for debugger! 现在终于找到了解决办法: 手机 设置 -> 开发人员选项 -> USB ...
- Java-Class-@I：javax.annotation.PostConstruct
ylbtech-Java-Class-@I:javax.annotation.PostConstruct 1.返回顶部 2.返回顶部 1.1. package com.ylbtech.api.pl ...
- 20、formAdd,javascript实现动态添加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用redis实现客户端和服务端token验证
实在是思维江化啊,没有想到可以给redis设置不同的key值来实现不同key值存储不同的value值,而一直想着给一个名为token的key值新增不同的数据,并设置过期时间,然而这样却不能新增只能做到 ...
- Dubbo面试20问！这些题你都遇到过吗？
作者:Dean Wang https://deanwang1943.github.io/bugs/2018/10/05/面试/饿了么/dubbo 面试题/ 1.dubbo是什么 dubbo是一个分布式 ...