专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

web前端进阶每日一题:输出下列打印结果。考点:改变this指向

ins518 2024-09-25 22:40:19 技术文章 15 ℃ 0 评论

01.题目

02.解析

本题目考点为改变this指向,首先来了解一下改变this指向的三种方式: call apply bind

call()方法:

  • 无数个参数
  • 第一个参数:表示要把this指向的新目标
  • 第二个参数:相当于给函数传参,参数以,隔开
  • 使用之后会自动执行该函数
const person = {
  name: '刘德华'
};

function sayName(age, hobby) {
  return `我的名字是:${this.name},年龄:${age},爱好:${hobby}`
};

console.log(sayName.call(person, 12, '唱歌')); 
// 我的名字是:刘德华,年龄:12,爱好:唱歌

apply方法:

  • 两个参数
  • 第一个参数:表示要把this指向的新目标
  • 第二个参数:接受一个数组,里面也是传参,只是以数组的方式,相当于arguments
  • 使用之后会自动执行该函数

apply() 与call()非常相似,不同之处在于提供参数的方式,apply()使用参数数组,而不是参数列表

const person = {
  name: '刘德华'
};

function sayName(age, hobby) {
  return `我的名字是:${this.name},年龄:${age},爱好:${hobby}`
};

console.log(sayName.apply(person, [12, '唱歌'])); 
// 我的名字是:刘德华,年龄:12,爱好:唱歌

bind()方法:

bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

  • 无数个参数
  • 第一个参数:表示要把this指向的新目标
  • 第二个参数之后:相当于给函数传参,参数以,隔开
  • 返回值为一个新的函数,使用的时候需要手动调用下返回的新函数(不会自动执行)
    const person = {
      name: '刘德华'
    };

    function sayName(age, hobby) {
      return `我的名字是:${this.name},年龄:${age},爱好:${hobby}`
    };

    console.log(sayName.bind(person, 12, '唱歌'));
    // |
    // |__ ==> 返回了一个新的函数,使用的时候需要手动调用(不会自动执行)

    // 手动调用返回的新函数
    const newFunction = sayName.bind(person, 12, '唱歌');
    console.log(newFunction());
    // 打印结果:==> 我的名字是:刘德华,年龄:12,爱好:唱歌

总结一下

  • apply、call、bind三者都是用来改变函数的this对象的指向的;
  • apply、call、bind三者第一个参数都是this要指向的对象,也就是想指定的上下文;
  • apply、call两者都可以利用后续参数传参;但是传参的方式不一样,apply是数组,call是正常传参形式
  • bind是返回对应函数,便于稍后调用;apply、call则是立即调用 。

03.答案:

更多热点

web前端进阶每日一题:下列代码的执行顺序,主要考点:任务队列

开发中需要切换分支,但是又不想提交当前分支代码时该如何处理?

gitee上如何免费托管静态网站

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表