js高级进阶——手动实现call()函数

news/2024/7/19 16:42:32 标签: js, call, 高级
// 首先看下原生的jscall()
var obj = {
  name: 'Nicholas S.Zakas',
  age: 41,
  from: 'America',
  getName: function (prefix) {
    // console.log(prefix + this.name)
    return prefix + this.name
  }
}

var obj2 = {
  name: 'Evan You',
  age: '35',
  from: 'China'
}

console.log(obj.getName.call(obj2, 'hello, everyone, i am '))
// hello, everyone, i am Evan You

// call()做了什么?
// 1、将调用call的函数的this指向call函数的第一个参数
// 2、将call()第一个参数后的参数作为调用call函数的形参
Function.prototype._call = function (context) {
  var result
  var args = [].slice.apply(arguments, [1])
  context.fn = this
  result = context.fn(...args)
  delete context.fn
  return result
}

// 不使用 apply 函数的实现
Function.prototype._newCall = function (context) {
  var args = []
  var result
  for (var i = 1; i < arguments.length; i++) {
    args.push('arguments[' + i + ']')
  }
  context.fn = this
  result = eval('context.fn(' + args + ')')
  delete context.fn
  return result
}

console.log(obj.getName._newCall(obj2, 'hello, everyone, i am '));
// hello, everyone, i am Evan You

// ECMAScript6 的实现
Function.prototype._es6Call = function (context, ...args) {
  const fn = Symbol();

  context[fn] = this;
  
  const result = context[fn](...args);

  delete context[fn];

  return result;
}

console.log(obj.getName._es6Call(obj2, 'hello, everyone, i am '));
 // hello, everyone, i am Evan You

在 context 上添加 fn 属性的目的其实就是在 call 的目标对象 obj 上添加一个属性 fn,使用了 js 语言特有的 this 隐式上下文绑定关系,如:

const obj = {
    a: 1,
    test: function(){
        console.log(this.a)
    }
}

这里调用 obj.test()

test 函数内部打印的 this 指针就是指向 obj,我们手写的 call 函数就是利用这一特性实现了所谓 this 指针的改变。


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

相关文章

Spring Security 实现基于数据库的用户登录和修改密码

1 pom.xml(Maven依赖文件) <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId></dependency><!-- Spring Security--><dependency><groupId>org.springfr…

js高级进阶——手动实现apply()函数

// 首先看下apply()var obj {name: Nicholas S.Zakas,introduce: function (from) {console.log(hello, everyone, i am this.name, i am from from)}}var obj2 {name: Evan You}obj.introduce.apply(obj2, [china]) // hello, everyone, i am Evan You i am from chinaF…

MinIO NoClassDefFoundError: io/minio/MinioClient问题解决

问题描述&#xff1a; Caused by: java.lang.NoClassDefFoundError: io/minio/MinioClient 问题分析&#xff1a; 1、没有下载minio依赖导致报错。 解决办法&#xff1a; <dependency><groupId>io.minio</groupId><artifactId>minio</artifact…

MySQL 2059 - Authentication plugin ‘caching_sha2_password‘ cannot be loaded:问题解决

问题描述&#xff1a; 2059 - Authentication plugin caching_sha2_password cannot be loaded: 问题分析&#xff1a; 1、MySQL8.0.19数据库的当前登录用户加密规则为caching_sha2_password&#xff0c;使用Navicat12.0连不上。 解决办法&#xff1a; &#xff08;1&#…

js高级进阶——手动实现深拷贝函数

主要考察目标&#xff1a; 数据类型校验循环引用function deepClone(data, hash new WeakMap) {if (data undefined) return data;if (typeof data ! object) return data;if (data instanceof RegExp) return new RegExp(data)if (data instanceof Date) return new Date(d…

Java HTTP Status 400 – Bad Request问题解决

问题描述&#xff1a; HTTP Status 400 – Bad Request 问题分析&#xff1a; 1、参数里面带有特殊字符&#xff0c;比如|&#xff0c;特殊字符没有转义导致报错。 解决办法&#xff1a; |转义为%7C 。 2、Controller层的接口指定为Get方式请求&#xff0c;但是加上了Req…

观察者模式 vs 发布订阅模式

有一回面试&#xff0c;面试官问&#xff1a; 观察者模式&#xff0c;和发布订阅模式&#xff0c;有什么区别&#xff1f;我脑海中立刻闪现了《Head First设计模式》里讲的&#xff1a; Publishers Subscribers Observer Pattern“哼哼&#xff0c;我知道答案了&#xff0c;兄…

Spring Boot 实现后端进行参数校验

1 pom.xml(Maven依赖文件) <!--第一种方式导入校验依赖--><dependency><groupId>javax.validation</groupId><artifactId>validation-api</artifactId><version>2.0.1.Final</version></dependency><!--第二种方式导…