当前位置: 首页 > news >正文

new 以及 call、apply、bind 关键字解析

1.new关键字

  1. 自动创建对象:使用new调用构造函数时,会自动创建一个空对象,并将其赋值给this。你不需要显式地使用{}来创建对象。

  2. 绑定this到新对象:构造函数内部的this指向新创建的对象,因此可以在构造函数中为新对象添加属性和方法。

  3. 继承原型链:新对象会继承构造函数的prototype属性所指向的对象。这意味着所有通过new创建的实例都可以访问原型上的属性和方法。

  4. 隐式返回新对象:构造函数默认返回新创建的对象。如果构造函数中有显式的返回值,只有当返回的是一个对象时才会覆盖默认行为;如果返回的是原始类型(如字符串、数字等),则仍然返回新创建的对象。

  5. 构造函数必须使用new调用:如果忘记使用new调用构造函数,this将指向全局对象(浏览器环境中是window,严格模式下是undefined),这可能会导致意外的行为和错误。

function Preson() {this.name = 'gauseen'return { age: 18 }
}let p = new Preson()
console.log(p) // 函数中主动返回了一个对象,所以打印是 {age: 18} 
console.log(p.name) // 返回的是{age: 18} ,所以没有name属性 undefinedfunction Preson1() {this.name = 'gauseen'return 'tom'
}let p = new Preson1()
console.log(p) // 主动返回的不是对象,所以还是执行默认行为 Preson1 {name: 'gauseen'}
console.log(p.name) // gauseen

2.callapply 和 bind 的相同点

  1. 改变函数的 this 指向:三者都可以用来改变函数内部的 this 指向,使得函数可以在不同的上下文中执行。
  2. 继承原函数的作用域:调用时会继承原函数的作用域链。

3.不同点

let a = {name: '梦见月',age: 18,getName: function (msg) {return msg + this.name},
}let b = {name: '芙宁娜',
}console.log(a.getName('hi!')) // hi!梦见月console.log(a.getName.call(b, 'hi!')) // hi!芙宁娜console.log(a.getName.apply(b, ['hi!'])) // hi!芙宁娜let getNowName = a.getName.bind(b, 'hi!') // 通过bind改变this指向执行时用方法执行
console.log(getNowName()) // hi!芙宁娜

其实没那么难理解,就是借用的概念,一个对象上没有想用的方法,那就借用别人的方法

4.使用场景

1.类数组借用

let a = {0: '弗洛伊德',1: '阿基维利',length: 2,
}Array.prototype.push.call(a, '叔本华', '东野圭吾')
console.log(a) // [ '弗洛伊德', '阿基维利', '叔本华', '东野圭吾' ]

2.求数组最大值

let a = [1, 2, 3, 4, 56, 7, 99, 6, 1]console.log(Math.max(...a)) // 99
console.log(Math.max.apply(Math, a)) // 99

5.手写 apply、cal l和 bind

let a = [1, 2, 3, 4, 56, 7, 99, 6, 1]// 自定义 call 方法
Function.prototype.myCall = function(context, ...args) {context = context || windowconst fn = Symbol('fn')context[fn] = thisconst result = context[fn](...args)delete context[fn]return result
}// 自定义 apply 方法
Function.prototype.myApply = function(context, args) {context = context || windowconst fn = Symbol('fn')context[fn] = thisconst result = context[fn](...args)delete context[fn]return result
}// 自定义 bind 方法
Function.prototype.myBind = function(context, ...args) {const self = thisreturn function(...newArgs) {return self.myCall(context, ...args, ...newArgs)}
}console.log(Math.max.myCall(Math, ...a))
console.log(Math.max.myApply(Math, a))
console.log(Math.max.myBind(Math)(...a))
http://www.lryc.cn/news/534445.html

相关文章:

  • 【用Deepseek搭建免费的个人知识库--综合教程(完整版)】第二篇:Ollama服务器
  • 【图片合并转换PDF】如何将每个文件夹下的图片转化成PDF并合并成一个文件?下面基于C++的方式教你实现
  • 从基础到人脸识别与目标检测
  • Elasticsearch:在 Elastic 中玩转 DeepSeek R1 来实现 RAG 应用
  • 寒假2.6--SQL注入之布尔盲注
  • CTF中特别小的EXE是怎么生成的
  • git rebase 和 git merge的区别
  • Gitlab中如何进行仓库迁移
  • LabVIEW 开发航天项目软件
  • 深度整理总结MySQL——MySQL加锁工作原理
  • kafka专栏解读
  • 1-portal认证功能
  • MySQL面试题合集
  • spring学习(druid、c3p0的数据源对象管理)(案例学习)
  • WordPress博客在fnOS环境下的极简搭建与公网地址配置指南
  • 【PG】DROP TABLE ... CASCADE
  • 绕组电感 - Ansys Maxwell 磁通链与电流
  • 物联网软件开发与应用方向应该怎样学习,学习哪些内容,就业方向是怎样?(文末领取整套学习视频,课件)物联网硬件开发与嵌入式系统
  • 《LeetCode Hot100》 Day01
  • vue动态table 动态表头数据+动态列表数据
  • 1.3 GPT vs BERT 终极选择指南:从架构差异到企业级落地策略
  • python-leetcode 23.回文链表
  • 食品饮料生产瓶颈?富唯智能协作机器人来 “破壁”
  • Golang GORM系列:GORM CRUM操作实战
  • C++ labmbd表达式
  • 《大规模动画优化(一):GPU 顶点动画的生成》
  • 【前端】几种常见的跨域解决方案
  • 如何在WinForms应用程序中读取和写入App.config文件
  • 【分布式理论7】分布式调用之:服务间的(RPC)远程调用
  • 人工智能应用-智能驾驶精确的目标检测和更高级的路径规划