三者区别及用法
bind | call | apply | (this,param1,param2,param3,...) | (this,param1,param2,param3,...) | (this,[param1,param2,param3,...]) | 返回的是fn的拷贝,改变了this的指向,保留了fn的参数 | fn的执行结果 | fn的执行结果 | 不立即执行 | 立即执行 | 立即执行 |
---|
bind使用场景
let user = {
data:[
{name:'张三',age:'18'},
{name:'王五',age:'25'},
],
getUserAge(name){
let {age=''} = this.data.find(item=>item.name === name) || {}
console.log(age)
}
}
user.getUserAge('王五')
如果不执行call,apply,bind 此时的this-->user;age-->'25'
let person = {
data:[
{name:'李四',age:'20'}
]
}
person需要getUserAge方法,不需要重新定义注入,直接借用user的即可
person.getUserAge = user.getUserAge.bind(person,'李四')
person.getUserAge() //此时的this-->person;age-->'20'
call使用场景
Object.prototype.toString.call 检验类型
let argArray = {
0:'王权',
1:'富贵',
length:2
}
Array.prototype.push.call(argArray,'星星','竹海') // { '0': '王权', '1': '富贵', '2': '星星', '3': '竹海', length: 4 }
apply使用场景
const arr = [0,1,22,66,2,11]
const max = Math.max.apply(Math,arr)
const min = Math.min.apply(Math,arr)
拓展:
new 关键字
不用关键字new
创建一个构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
添加方法
Person.prototype.sayHi = function () {
console.log(this.name)
}
调用
const person1 = Person('夏有凉风',18)
console.log(person1,'person') // undefined
console.log(window.name) // this --> window '夏有凉风'
关键字new
const person2 = new Person('冬有雪',88)
console.log(person2,'person') // Person { name: '冬有雪', age: 88 }
person2.sayHi() // '冬有雪'
实现new
1.创建一个新的对象
2.新对象[[Prototype]]被赋值位为构造函数的prototype属性
3.构造函数内部的this被赋值为新对象
4.给新对象添加属性
5.返回新的对象
function _new(fn,arguments){
cosnt newObj = {}
newObj._proto_ = fn.prototype; // prototype是函数属性 _proto_ 对象的属性
fn.apply(newObj,arguments)
return newObj
}
注意点:如果构造函数返回了非空的对象
function Person(name,age){
this.name = name;
this.age = age;
return {car:'奔奔'}
}
const person2 = new Person('冬有雪',88) // { car: '奔奔' }
此时new 返回的就是该非空的对象
整合:
function _new(fn,...args){
cosnt newObj = Object.create(fn.prototype)
const res = fn.apply(newObj,args)
return res instabceof Object ? res : newObj
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!