1.在函数内部声明一个that，然后将this赋值给that,

var that=this;
最后用that 代替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() {

            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种方法的更多相关文章

  1. 【面试题】JS改变this指向的三种方法

    一.this指向 点击打开视频讲解更加详细 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window 1.全局作用下 ...

  2. ES5中改变this指向的三种方法

    ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...

  3. 改变this指向的三种方法

    call.apply.bind三者为改变this指向的方法. 共同点:第一个参数都为改变this的指针.若第一参数为null/undefined,this默认指向window call(无数个参数) ...

  4. js 改变this指向的三种方法 bind call apply

    先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...

  5. Linux 中改变主机名的 4 种方法

    今天,我们将向你展示使用不同的方法来修改主机名.你可以从中选取最适合你的方法. 使用 systemd 的系统自带一个名为 hostnamectl 的好用工具,它可以使我们能够轻易地管理系统的主机名. ...

  6. html之改变图片透明度而不改变文字的透明度--两种方法实现

    图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...

  7. unity 改变鼠标样式的两种方法

    1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...

  8. Android 改变字体颜色的三种方法

    在TextView中添加文本时有时需要改变一些文本字体的颜色,今天学到了三种方法,拿出来分享一下     1.在layout文件下的配置xml文件中直接设置字体颜色,通过添加android:textc ...

  9. 改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. function a() { alert( ...

随机推荐

  1. WPF textbox 鼠标滚动更新日期，text文本值更改

    /// <summary> /// 选择日期 /// </summary> private void RQTxt_MouseWheel(object sender, Mouse ...

  2. 2019-5-21-win10-uwp-url-encode

    title author date CreateTime categories win10 uwp url encode lindexi 2019-5-21 9:54:7 +0800 2018-2-1 ...

  3. python使用SMTP发邮件时使用Cc（抄送）和Bcc（密送）

    SMTP发送邮件的时候,并没有特殊的通信语句告诉邮件服务器 谁是主送,谁是抄送/密送,这三个角色都是以同样的方式告诉邮件服务器的,然后重点在邮件内容里. 邮件内容分为头和体两部分(就像http),头部 ...

  4. 视频专家之路【二】:ffmpeg工具的使用

    本文是听了雷宵骅大神的课之后的总结,部分内容借用了其PPT的内容,如有侵权请告知删除. 雷宵骅大神的博客为:https://blog.csdn.net/leixiaohua1020 要学习汽修,那么首 ...

  5. Android 6.0 - 动态权限管理的解决方案（转）

    转自:http://www.cnblogs.com/dubo-/p/6018262.html Android 6.0 - 动态权限管理的解决方案   转载请标注 Android 6.0版本(Api 2 ...

  6. robotframework+python3+selenium自动化测试环境搭建---第一集

    1.安装python3.6 1.1 可选择Customize installation自定义安装内容,记得要勾选Add to PATH(这样就不用自己配置环境变量了). 1.2 安装成功后,可以输入p ...

  7. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  8. psecurity配置

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  9. Java/sql找出oracle数据库有空格的列

    1.java方式 String table_sql = "select table_name from user_tables";//所有用户表 List<String> ...

  10. 【命令】GETBIT/SETBIT

    我们在登陆某些博客网站或者视频网站的时候,网站往往会记录我们是否阅读了某篇文章,或者是观看了某个视频. 如果用传统的mysql数据库实现,如果用户数量多,文章和视频也多的情况下,那么则会给数据库带来很 ...