当前位置： 首页 > article >正文

Javascript面试对象编程 - 手写apply call bind new

article 2024/11/20 20:25:31

Javascript 参数传递

  • 基本类型值存储于栈内存中，传递的就是当前值，修改不会影响原有变量的值；​
  • 引用类型值其实也存于栈内存中，只是它的值是指向堆内存当中实际值的一个地址；索引引用传递传的值是栈内存当中的引用地址，当改变时，改变了堆内存当中的实际值；
var value = 1;​
function foo(v) {​
    v = 2;​
    console.log(v); //2​
}​
foo(value);​
console.log(value) // 1

内存分布：
在这里插入图片描述
改变后：
在这里插入图片描述

var obj = {​
value: 1​
};​
function foo(o) {​
    o.value = 2;​
    console.log(o.value); //2​
}​
foo(obj);​
console.log(obj.value) // 2

改变前：
在这里插入图片描述
改变后：
在这里插入图片描述

手写Call 和 Apply

call() ：在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

let foo = {​
    value: 1​
};​
​
function bar() {​
    console.log(this.value);​
}​
​
bar.call(foo); // 1

注意两点：

  • call 改变了 this 的指向，指向到 foo；​
  • bar 函数执行了；

1）首先第一步：

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

这个时候 this 就指向了 foo，但是这样却给 foo 对象本身添加了一个属性，所以们用 delete 再删除它即可。​
所以我们模拟的步骤可以分为：

  • 将函数设为对象的属性；​
  • 执行该函数；​
  • 删除该函数；
// 第一步​
// fn 是对象的属性名，反正最后也要删除它，所以起什么都可以。​
foo.fn = bar​
// 第二步​
foo.fn()​
// 第三步​
delete foo.fn

根据上述思路，提供一版：

//第一步 
Function.prototype.call2 = function(context){
  //首先要获取调用call函数
  context.fn = this;
  context.fn();
  delete context.fn;
}
// 测试一下​
 let foo = {​
    value: 1​
};​
​
function bar() {​
    console.log(this.value);​
}​
​
bar.call2(foo); // 1
  1. call除了可以指定this，还可以指定参数
var foo = {​
    value: 1​
};​
​
function bar(name, age) {​
    console.log(name)​
    console.log(age)​
    console.log(this.value);​
}​
​
bar.call(foo, 'kevin', 18);​
// kevin​
// 18​
// 1

可以从 Arguments 对象中取值，取出第二个到最后一个参数，然后放到一个数组里。​
上述代码的Arguments中取第二个到最后一个的参数

// 以上个例子为例，此时的arguments为：​
// arguments = {​
//      0: foo,​
//      1: 'kevin',​
//      2: 18,​
//      length: 3​
// }​
// 因为arguments是类数组对象，所以可以用for循环​
var args = [];​
for(var i = 1, len = arguments.length; i < len; i++) {​
    args.push('arguments[' + i + ']');​
}​
​
// 执行后 args为 ["arguments[1]", "arguments[2]", "arguments[3]"]

接下来使用eval拼接成一个函数

//eval函数主要作用：用于计算字符串并将里面的代码进行执行
eval('context.fn(' + args +')')

考虑到目前大部分浏览器在console中限制eval的执行，也可以使用rest​
此处代码为：

Function.prototype.call2 = function(context){
	context.fn = this;
	let args = [...arguments].slice(1);
	context.fn(...args);
	delete context.fn;
}

// 测试一下​
var foo = {​
    value: 1​
};​
function bar(name, age) {​
    console.log(name)​
    console.log(age)​
    console.log(this.value);​
}​
​
bar.call2(foo, 'kevin', 18); ​
// kevin​
// 18​
// 1
  1. this 参数可以传 null，当为 null 的时候，视为指向 window
var value = 1;​
​
function bar() {​
    console.log(this.value);​
}​
​
bar.call(null); // 1

针对函数可实现返回值；

var obj = {​
    value: 1​
}​
​
function bar(name, age) {​
    return {​
        value: this.value,​
        name: name,​
        age: age​
    }​
}​
​
console.log(bar.call(obj, 'kevin', 18));​
// Object {​
//    value: 1,​
//    name: 'kevin',​
//    age: 18​
// }

简化写法之后如下显示：

Function.prototype.call2 = function(context){
	context.fn = this || window;
	const args= [...arguments].slice(1);
	const result = context.fn(...args);
	delete context.fn;
	return result;
}
// 测试一下​
var value = 2;​
​
var obj = {​
    value: 1​
}​
​
function bar(name, age) {​
    console.log(this.value);​
    return {​
        value: this.value,​
        name: name,​
        age: age​
    }​
}​
​
bar.call2(null); // 2​
​
console.log(bar.call2(obj, 'kevin', 18));​
// 1​
// Object {​
//    value: 1,​
//    name: 'kevin',​
//    age: 18​
// }

标准写法如下：

Function.prototype.call2 = function(context, ...args) {​
  // 判断是否是undefined和null​
  if (typeof context === 'undefined' || context === null) {​
    context = window​
  }​
  let fnSymbol = Symbol()​
  context[fnSymbol] = this​
  let fn = context[fnSymbol](...args)​
  delete context[fnSymbol] ​
  return fn​
}

手写apply

手写apply的方法和call类似：

Function.prototype.apply = function (context, arr) {​
    var context = Object(context) || window;​
    context.fn = this;​
​
    var result;​
    if (!arr) {​
        result = context.fn();​
    }​
    else {​
                result = context.fn(...arr)​
    }​
​
    delete context.fn​
    return result;​
}

简化方式：

Function.prototype.apply2 = function(context, args) {​
  // 判断是否是undefined和null​
  if (typeof context === 'undefined' || context === null) {​
    context = window​
  }​
  let fnSymbol = Symbol()​
  context[fnSymbol] = this​
  let fn = context[fnSymbol](...args)​
  delete context[fnSymbol] ​
  return fn​
}

手动bind

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。
由此我们可以首先得出 bind 函数的两个特点：​

  • 返回一个函数；​
  • 可以传入参数；

返回函数的模拟实现

var foo = {​
    value: 1​
};​
​
function bar() {​
    console.log(this.value);​
}​
​
// 返回了一个函数​
var bindFoo = bar.bind(foo); ​
​
bindFoo(); // 1

关于指定 this 的指向，我们可以使用 call 或者 apply 实现

// 第一版​
Function.prototype.bind2 = function (context) {​
    var self = this;​
​
    // 虑到绑定函数可能是有返回值的，加上return​
    return function () {​
        return self.apply(context);​
    }​
​
}

传参的模拟实现

接下来，关于参数的传递：

var foo = {​
    value: 1​
};​
​
function bar(name, age) {​
    console.log(this.value);​
    console.log(name);​
    console.log(age);​
​
}​
​
var bindFoo = bar.bind(foo, 'daisy');​
bindFoo('18');​
// 1​
// daisy​
// 18

当需要传 name 和 age 两个参数时，可以在 bind 的时候，只传一个 name，在执行返回的函数的时候，再传另一个参数 age。​
这里如果不适用rest，使用arguments进行处理：

// 第二版​
Function.prototype.bind2 = function (context) {​
​
    var self = this;​
    // 获取bind2函数从第二个参数到最后一个参数​
    var args = Array.prototype.slice.call(arguments, 1);​
​
    return function () {​
        // 这个时候的arguments是指bind返回的函数传入的参数​
        var bindArgs = Array.prototype.slice.call(arguments);​
        return self.apply(context, args.concat(bindArgs));​
    }​
}

构造函数模拟实现：

bind 还有一个特点，就是
一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候，bind 时指定的 this 值会失效，但传入的参数依然生效。举个例子：

var value = 2;​
​
var foo = {​
    value: 1​
};​
​
function bar(name, age) {​
    this.habit = 'shopping';​
    console.log(this.value);​
    console.log(name);​
    console.log(age);​
}​
​
bar.prototype.friend = 'kevin';​
​
var bindFoo = bar.bind(foo, 'daisy');​
​
var obj = new bindFoo('18');​
// undefined​
// daisy​
// 18​
console.log(obj.habit);​
console.log(obj.friend);​
// shopping​
// kevin

尽管在全局和 foo 中都声明了 value 值，最后依然返回了 undefind，说明绑定的 this 失效了

后文中new 的模拟实现，就会知道这个时候的 this 已经指向了 obj。

// 第三版​
Function.prototype.bind2 = function (context) {​
    var self = this;​
    var args = Array.prototype.slice.call(arguments, 1);​
​
    var fBound = function () {​
        var bindArgs = Array.prototype.slice.call(arguments);​
        // 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值​
        // 以上面的是 demo 为例，如果改成 `this instanceof fBound ? null : context`，实例只是一个空对象，将 null 改成 this ，实例会具有 habit 属性​
        // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context​
        return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs));​
    }​
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值​
    fBound.prototype = this.prototype;​
    return fBound;​
}

构造函数优化实现：
但是在这个写法中，我们直接将 fBound.prototype = this.prototype，我们直接修改 fBound.prototype 的时候，也会直接修改绑定函数的 prototype。这个时候，我们可以通过一个空函数来进行中转：

// 第四版​
Function.prototype.bind2 = function (context) {​
​
    var self = this;​
    var args = Array.prototype.slice.call(arguments, 1);​
​
    var fNOP = function () {};​
​
    var fBound = function () {​
        var bindArgs = Array.prototype.slice.call(arguments);​
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));​
    }​
​
    fNOP.prototype = this.prototype;​
    fBound.prototype = new fNOP();​
    return fBound;​
}

最终版：
调用 bind 的不是函数时，提示错误：

if (typeof this !== "function") {​
  throw new Error("Function.prototype.bind - what is trying to be bound is not callable");​
}

最终代码为：

Function.prototype.bind2 = function (context) {​
​
    if (typeof this !== "function") {​
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");​
    }​
​
    var self = this;​
    var args = Array.prototype.slice.call(arguments, 1);​
​
    var fNOP = function () {};​
​
    var fBound = function () {​
        var bindArgs = Array.prototype.slice.call(arguments);​
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));​
    }​
​
    fNOP.prototype = this.prototype;​
    fBound.prototype = new fNOP();​
    return fBound;​
}

最终简化版本：

Function.prototype.myBind = function(context) {​
// 判断是否是undefined 和 null​
    if (typeof context === "undefined" || context === null) {​
        context = window;​
    }​
    self = this;​
    return function(...args) {​
        return self.apply(context, args);​
    }​
}

手动实现new

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一​
先看看 new 实现了哪些功能。

function Person (name, age) {​
    this.name = name;​
    this.age = age;​
​
    this.habit = 'Games';​
}​
​
Person.prototype.strength = 80;​
​
Person.prototype.sayYourName = function () {​
    console.log('I am ' + this.name);​
}​
​
var person = new Person('Kevin', '18');​
​
console.log(person.name) // Kevin​
console.log(person.habit) // Games​
console.log(person.strength) // 80​
​
person.sayYourName(); // I am Kevin

我们可以看到，实例 person 可以：​

  • 访问到 Otaku 构造函数里的属性；​
  • 访问到 Otaku.prototype 中的属性；​

接下来，我们可以尝试着模拟一下了。​
因为 new 是关键字，所以无法像 bind 函数一样直接覆盖，所以我们写一个函数，命名为 objectFactory，来模拟 new 的效果。用的时候是这样的：

function Person () {​
    ……​
}​
​
// 使用 new​
var person = new Person(……);​
// 使用 objectFactory​
var person = objectFactory(Person, ……)

初步实现
因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Person 构造函数里的属性，我们可以使用 Person.apply(obj, arguments)来给 obj 添加新的属性。​
然后，实例的 proto 属性会指向构造函数的 prototype，也正是因为建立起这样的关系，实例可以访问原型上的属性

// 第一版代码​
function objectFactory() {​
    var obj = new Object(),​
    Constructor = [].shift.call(arguments);​
    obj.__proto__ = Constructor.prototype;​
    Constructor.apply(obj, arguments);​
​
    return obj;​
​
};

在这一版中，我们：​

  • 用new Object() 的方式新建了一个对象 obj；​
  • 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数；​
  • 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性；​
  • 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性；​
  • 返回 obj；
function Person (name, age) {​
    this.name = name;​
    this.age = age;​
​
    this.habit = 'Games';​
}​
​
Person.prototype.strength = 60;​
​
Person.prototype.sayYourName = function () {​
    console.log('I am ' + this.name);​
}​
​
function objectFactory() {​
    var obj = new Object(),​
    Constructor = [].shift.call(arguments);​
    obj.__proto__ = Constructor.prototype;​
    Constructor.apply(obj, arguments);​
    return obj;​
};​
​
var person = objectFactory(Person, 'Kevin', '18')​
​
console.log(person.name) // Kevin​
console.log(person.habit) // Games​
console.log(person.strength) // 60​
​
person.sayYourName(); // I am Kevin

最终版本：

// 最终版的代码​
function objectFactory() {​
    var obj = new Object(),​
    Constructor = [].shift.call(arguments);​
    obj.__proto__ = Constructor.prototype;​
    var ret = Constructor.apply(obj, arguments);​
    return typeof ret === 'object' ? ret : obj;​
​
};

http://www.kler.cn/a/401969.html

相关文章：

  • Apache和HTTPS证书的生成与安装
  • 问：Spring MVC DispatcherServlet流程步骤梳理
  • Chainlit快速实现AI对话应用将聊天记录的持久化到MySql关系数据库中
  • SpringBoot:不支持发行版本17超详细解决办法
  • 【Spring】循环引用 解决流程，只用一二级缓存？
  • 39.十进制数转化为二进制数 C语言
  • 远程办公用香港服务器合适吗？
  • leetcode400第N位数字
  • [Go实战]：SSE消息推送
  • 聚类分析 | MSADBO优化Spectral谱聚类优化算法
  • 群控系统服务端开发模式-应用开发-前端级别功能开发
  • 小红书内容推荐算法开发：利用API打造个性化用户体验
  • Android全局异常捕获
  • Android中常见内存泄漏的场景和解决方案
  • 代码辅助工具 GPT / Cursor
  • AWS EC2 ubuntu 使用密码登陆
  • 24.11.14 朴素贝叶斯分类 决策树-分类
  • 【算法】动态规划中01背包问题解析
  • uniapp 自定义加载组件,全屏加载,局部加载 （微信小程序）
  • git 基础之 merge 和 rebase 的比较
  • 运维面试题.云计算面试题之三ELK
  • VGG16-Pytorch实现人脸识别
  • C/C++实现tcp客户端和服务端的实现（从零开始写自己的高性能服务器）
  • AI 驱动低代码平台：开创智能化用户体验新纪元
  • vue功能基础元素使用
  • Java中日志采集框架-JUL、Slf4j、Log4j、Logstash