函数,构造函数中使用call,apply,bind 以及他们的区别

news/2024/7/11 1:31:56 标签: javascript, es6, 前端

函数中使用

bind

javascript">function eat(food,name){
  this.food=food
  this.call=call
}
function weather(food,name,what){
  console.log("今天的天气是"+what);
  console.log("我喜欢吃"+food);
  console.log("我是"+name)
}
weather.bind(eat,"肉","狗","大雨")()

在这里插入图片描述
call

javascript">function eat(food,name){
  this.food=food
  this.call=call
}
function weather(food,name,what){
  console.log("今天的天气是"+what);
  console.log("我喜欢吃"+food);
  console.log("我是"+name)
}
weather.call(eat,"肉","狗","大雨")

在这里插入图片描述
apply

javascript">function eat(food,name){
  this.food=food
  this.call=call
}
function weather(food,name,what){
  console.log("今天的天气是"+what);
  console.log("我喜欢吃"+food);
  console.log("我是"+name)
}
weather.apply(eat,["肉","狗","大雨"])

在这里插入图片描述

javascript">function eat(food,name){
  this.food=food
  this.call=call
}
function weather(food,name,what){
  console.log("今天的天气是"+what);
  console.log("我喜欢吃"+food);
  console.log("我是"+name)
}
weather.bind(eat,"肉","狗","大雨")()
weather.call(eat,"肉","狗","大雨")
weather.apply(eat,["肉","狗","大雨"])

在构造函数中使用

apply

javascript">function student(name,age) {
  this.name=name
  this.age=age
}
function person(name,age,grade) {
  this.grade=grade
  student.apply(this,arguments)
}
const a=new person("小明",18,"五年级")
console.log("姓名--"+a.name);
console.log("年龄--"+a.age);
console.log("年级--"+a.grade);

在这里插入图片描述
但是用apply参数数组必须一致
在这里插入图片描述
call

javascript">function student(name,age) {
  this.name=name
  this.age=age
}
function person(name,age,grade) {
  this.grade=grade
  student.call(this,name,age)
}
const a=new person("小明",18,"五年级")
console.log("姓名--"+a.name);
console.log("年龄--"+a.age);
console.log("年级--"+a.grade);

在这里插入图片描述
bind

javascript">function student(name,age) {
  this.name=name
  this.age=age
}
function person(name,age,grade) {
  this.grade=grade
  student.bind(this,name,age)()
}

const a=new person("小明",18,"五年级")

console.log("姓名--"+a.name);
console.log("年龄--"+a.age);
console.log("年级--"+a.grade);

在这里插入图片描述

三者区别

虽然他们的作用都是改变this的指向,第一个参数都是你要改变的this的指向但是他们也有很b多不同点
1.call和apply是立即执行的
2.bind返回的是一个函数
3.apply的第二个参数是一个数组、
4.call除了第一个参数都是传入的参数
bind和call的方法传参方式一样但是返回的是函数想要执行必须以函数的方式执行


http://www.niftyadmin.cn/n/1371659.html

相关文章

伪数组 伪数组怎样使用数组里面的方法

伪数组 伪数组它的类型不是Array,而是Object,而数组类型是Array。可以使用的length属性查看长度,也可以使用[index]获取某个元素,但是不能使用数组的其他方法,也不能改变长度,遍历使用for in方法。 伪数组…

关于TCP传输协议(面向连接篇)

关于TCP传输协议(面向连接篇) “ 此篇文章主要是想简单介绍一下TCP协议,大部分内容都是结合自己的理解,尽量用通俗的语言描述问题” - 我理解的面向连接 在最开始学的时候我也不太能理解面向连接怎么理解,难是真的有一…

关于TCP传输协议(协议头详解篇)

关于TCP传输协议(协议头详解篇) 在进行网络通信时,如果传输层选择的是TCP协议,那么你接下来每次进行网络通信时,都会在你的数据上包装一个TCP协议头,来控制你数据的可靠性以及网络传输性能问题,…

发布订阅模式 以及和观察者模式的区别

代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initia…

Linux系统之信号及处理流程(图详解)

关于Linux系统&#xff08;信号篇&#xff09; 引言&#xff1a;信号机制是一种使用信号来进行进程之间传递消息的方法&#xff0c;信号的全称为软中断信号&#xff0c;简称软中断。信号的本质是软件层次上对中断的一种模拟&#xff08;软中断&#xff09;。它是一种异步通信的…

策略模式 js

第一种&#xff08;添加&#xff0c;删除麻烦&#xff09; //接收两个参数&#xff0c;价格&#xff0c;折扣种类function calcPrice(price,type){if(type"100-10"){price-10}else if(type"200-25"){price-25}else if(type80%){price*0.8}else{console.log…

华为OD机试真题 Python 实现【单词倒序】【2023Q1 100分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Python算法源码六、效果展示1、输入2、输出3、思路 一、题目描述 输入单行英文句子&#xff0c;里面包含英文字母&#xff0c;空格以及.? 三种标点符号&#xff0c;请将句子内每个单词进行倒序&#xff0c;并输出倒…

TCP协议可靠性以及传输速率的保证(图解)

TCP协议可靠性以及传输速率的保证可靠性的保证1.缓冲区2. 确认应答机制3. 超时重传机制4. 差错校验机制传输速率的保证1. 全双工2. 滑动窗口3. 拥塞控制4.延持应答5.捎带应答可靠性的保证 1.缓冲区 在UDP协议中是没有真正意义的发送缓冲区的&#xff0c;所以这也就确定了UDP是…