博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用模拟实现的方式探究call 和 apply 的原理
阅读量:6436 次
发布时间:2019-06-23

本文共 2260 字,大约阅读时间需要 7 分钟。

使用模拟实现的方式探究call 和 apply 的原理

call

作用:

call() 方法就是在使用一个指定 this 值和若干个指定的参数值的前提下调用某个函数或者方法。
var foo = {    value : 1}function bar() {    console.log(this.value)}// 如果不对this进行绑定执行bar() 会返回undefinedbar.call(foo) // 1

也就是说call()改变了 this 的指向到了 foo

下面进行一下模拟实现

试想当调用 call 的时候,也就是类似于

var foo = {    value: 1,    bar: function() {        console.log(this.value)    }}foo.bar() // 1

这样就把 this 指向到了 foo 上,但是这样给 foo 对象加了一个属性,有些瑕疵,不过不要紧,执行完删除这个属性就可以完美实现了。

也就是说步骤可以是这样:

  1. 将函数设为对象的属性
  2. 执行这个函数
  3. 删除这个函数

下面就试着去实现一下:

Function.prototype.call2 = function(context) {    context.fn = this // this 也就是调用call的函数    var result = context.fn()    delete context.fn()    return result}var foo = {    value: 1}function bar() {    console.log(this.value)}bar.call2(foo) // 1

但是这样有一个小缺陷就是call() 不仅能指定this到函数,还能传入给定参数执行函数比如:

var foo = {    value: 1}function bar(name, age) {    console.log(name)    console.log(age)    console.log(this.value)}bar.call(foo, 'black', '18')// black// 18// 1

特别要注意的一点是,传入的参数的数量是不确定的,所以我们要使用arguments 对象,取出除去第一个之外的参数,放到一个数组里:

Function.prototype.call2 = function(context) {    context.fn = this // this 也就是调用call的函数    var args = [...arguments].slice(1)    var result = context.fn(...args)    delete context.fn()    return result}var foo = {    value: 1}function bar(name, age) {    console.log(name)    console.log(age)    console.log(this.value);}bar.call2(foo, 'black', '18') // black 18 1

还有一点需要注意的是,如果不传入参数,默认指向为 window,所以最终版代码:

Function.prototype.call2 = function(context) {    var context = context || window    context.fn = this // this 也就是调用call的函数    var args = [...arguments].slice(1)    var result = context.fn(...args)    delete context.fn()    return result}var value = 1function bar() {    console.log(this.value)}bar.call2()

apply

apply的方法和 call 方法的实现类似,只不过是如果有参数,以数组形式进行传递,直接上代码:

Function.prototype.apply2 = function(context) {    var context = context || window    context.fn = this // this 也就是调用apply的函数    var result    // 判断是否有第二个参数    if(arguments[1]) {        result = context.fn(...arguments[1])    } else {        result = context.fn()    }    delete context.fn()    return result}var foo = {    value: 1}function bar(name, age) {    console.log(name)    console.log(age)    console.log(this.value);}bar.apply2(foo, ['black', '18']) // black 18 1

转载地址:http://aahga.baihongyu.com/

你可能感兴趣的文章
全备份失败后,如何手工清除exchange日志文件,附微软KB
查看>>
java如何连接mysq之源码l讲解
查看>>
企业运维笔试考题(1)
查看>>
Mysql修改存储过程相关权限问题
查看>>
4.2权限管理
查看>>
彻底理解ThreadLocal
查看>>
AI看脸、测肤,左可美妆新零售,右能智慧医美
查看>>
MFC对话框弹出上下文菜单并响应命令
查看>>
用matplotlib获取雅虎股票数据并作图
查看>>
USB设备被识别流程【转】
查看>>
test
查看>>
跨入安全的殿堂--读《Web入侵安全测试与对策》感悟
查看>>
Python类及面向对象编程【转】
查看>>
spring boot(二):web综合开发
查看>>
DataGrid 功能实现收集(一)
查看>>
ANT 运行jar包的中文乱码问题
查看>>
【Xamarin.Android】应用消费品
查看>>
Programming with gtkmm 3
查看>>
LinuxUSB驱动程序调试--009:编写应用程序---验证协议【转】
查看>>
brk(), sbrk() 用法详解【转】
查看>>