JS基础源码之手写模拟new

JS基础源码之手写模拟new

  • 手写模拟new
    • 初步实现
    • 最终实现

手写模拟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('kin',18);
console.log(person.name);//kin
console.log(person.habit);//Games
console.log(person.strength);//80
person.sayYourName();// I am kin

我们可以看到,实例person可以:

  1. 访问到Otaku构造函数里的属性;
  2. 访问到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;
}

在这一版中,我们:

  1. 用new Object()的方式新建了一个对象obj;
  2. 取出第一个参数,就是我们要传入的构造函数。此外因为shift会修改原数组,所以arguments会被去除第一个参数;
  3. 将obj的原型指向构造函数,这样obj就可以访问到构造函数原型中的属性;
  4. 使用apply,改变构造函数this的指向到新建的对象,这样obj就可以访问到构造函数中的属性;
  5. 返回obj;
    测试下:
function Person (name,age){this.name = name;this,age = age;this,habit = 'Games';
}
Person.prototype.strength = 88;
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,'kin',17);
console.log(person.name);//kin
console.log(person.habit);//Games
console.log(person.strength);//88
person.sayYourName();// I am kin

最终实现

假如构造函数有返回值

function Person(name,age){this.strength = 90;this.age = age;return {name:name,habit:'Games'}
}
var person = new Person('kin',12);
console.log(person.name);//kin
console.log(person.habit);//Games
console.log(person.strength);//undefined
console.log(person.age);//undefined

在这个案例中,构造函数返回了一个对象,在实例person中只能访问返回的对象中的属性。
而且还要注意一点,在这里我们是返回一个对象,假如我们只是返回一个基本类型的值呢?
我们再看一个例子:

Function Person(name,age){this.strength = 60;this.age = age;return 'handsome boy';
}
var person = new Otaku('kin',12);
console.log(person.name);//undefined
console.log(person.age);//undefined
console.log(person.strength);//60
console.log(person.age);//18

这次尽管有返回值,但是相当于没有对返回值进行处理。
所以我们还需要判断返回的值是不是一个对象,如果是一个对象,我们就返回这个对象,如果没有,我们该返回什么就返回什么。

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

本文章可以参考JS基础之原型&原型链一起看,学习效果更佳哟~

好啦!简单的知识点就到这里啦休息一下奖励自己一下!
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开发猿的平平淡淡周末---2023/12/9

上周回顾 完成了遗留的开发任务,基本全部完成进一步了解了系统当时设计的原理熟悉了代码的重构 2023.12.9 天气晴 温度适宜 前言 小伙伴们大家好,时间很快,又来到了周末,也是一个平平淡淡的周末。上周只更了一篇博客...原…

渗透测试 | 渗透测试之信息收集

渗透测试(penetration test,pentest)是实施安全评估(即审计)的具体手段。 渗透测试可能是单独进行的一项工作,也可能是常规研发生命周期(例如,Microsoft SDLC)里 IT 安全…

Unicode编码解码

一、Unicode概述 Unicode是一种字符编码标准,旨在解决不同字符集之间的兼容性问题。它为全球所有语言提供了一种统一的编码方式,使得各种字符能够在计算机系统中正确显示和处理。Unicode字符集包含了世界上几乎所有的字符,包括中文字符、英文…

算法Day23 简单吃饭(0-1背包)

简单吃饭(0-1背包) Description Input Output Sample 代码 import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();int total scanner.nextInt(…

WebDriver核心方法和属性:掌握自动化测试的利器

在自动化测试中,Selenium WebDriver是一个非常重要的工具。它提供了一种方式来模拟用户与浏览器的交互,从而进行各种操作,如点击按钮、输入文本等。本文将介绍WebDriver的核心方法和属性,以及如何使用它们。 1. 启动和关闭浏览器…

使用es256算法生成jwt

1、使用hutool来做 1、先去jwt解密/加密 - bejson在线工具弄个公私钥 2、导入hutool maven <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.22</version></dependency><depe…

高项备考葵花宝典-项目进度管理输入、输出、工具和技术(中,很详细考试必过)

项目进度管理的目标是使项目按时完成。有效的进度管理是项目管理成功的关键之一&#xff0c;进度问题在项目生命周期内引起的冲突最多。 小型项目中&#xff0c;定义活动、排列活动顺序、估算活动持续时间及制定进度模型形成进度计划等过程的联系非常密切&#xff0c;可以视为一…

Pytorch中的resize和reshape

torch.reshape() 官方文档的大致意思是&#xff1a; 返回与输入具有相同数据和元素数量的张量&#xff0c;但是具有指定形状。如果可能&#xff0c;返回的张量将是输入的视图&#xff0c;也就是说原本的tensor并没有被改变&#xff0c;如果想要改变那么就将改变的tensor赋值给…

情深不必纠缠

那一年&#xff0c;男孩女孩在万千人中相遇了。多年后女人的一封邮件&#xff0c;让男人与女人的灵魂相遇了。他们无缘夫妻&#xff0c;却发现彼此是灵魂的陪伴。不能携手相守&#xff0c;却懂得彼此的心灵。 有一天&#xff0c;女人告诉男人要回家了&#xff0c;问男人心里会不…

ejs —— 三目运算符的用法

EJS&#xff08;Embedded JavaScript&#xff09;是一种简单的模板语言&#xff0c;它允许将JavaScript代码嵌入到HTML中。在EJS中&#xff0c;<%、<%和<%-是用于将JavaScript代码嵌入到模板中的语法。 <%&#xff1a;这是EJS的输出表达式&#xff0c;用于将变量的…

阿里云安装docker

文章目录 一、 yum 进行安装&#xff08;os版本 CentOS 7&#xff09; 推荐二、 apt-get 进行安装(os版本 Ubuntu 14.04/16.04&#xff09;三、测试四、阿里云docker加速 一、 yum 进行安装&#xff08;os版本 CentOS 7&#xff09; 推荐 # step 1: 安装必要的一些系统工具 su…

<HarmonyOS第一课>应用服务上架【课后考核】

【习题】HarmonyOS应用/元服务上架 判断题 元服务发布的国家与地区仅限于“中国大陆” 正确(True) 编译打包的软件包存放在项目目录build > outputs > default下 正确(True) 单选题 创建应用时&#xff0c;应用包名需要和app.json5或者config.json文件中哪个字段保持…

VMware安装Ubuntu20.04并使用Xshell连接虚拟机

文章目录 虚拟机环境准备重置虚拟网络适配器属性&#xff08;可选&#xff09;配置NAT模式的静态IP创建虚拟机虚拟机安装配置 Xshell连接虚拟机 虚拟机环境准备 VMware WorkStation Pro 17.5&#xff1a;https://customerconnect.vmware.com/cn/downloads/details?downloadGr…

基于Java旅游信息管理系统

基于Java旅游信息管理系统 功能需求 1、旅游目的地管理&#xff1a;系统需要能够记录和管理各个旅游目的地的详细信息&#xff0c;包括景点介绍、交通方式、住宿推荐等。管理员可以添加、编辑和删除目的地信息。 2、旅游线路规划&#xff1a;系统需要提供旅游线路规划功能&a…

C++类名后面跟大括号和跟小括号的区别

在 C 中&#xff0c;类名后面跟着大括号 {} 和小括号 () 有不同的含义和作用。 大括号 {}&#xff1a; 初始化对象&#xff1a;当在声明类对象时使用大括号 {} 时&#xff0c;这表示对对象进行初始化。这种方式也称为列表初始化或者统一初始化。示例&#xff1a;MyClass obj{};…

网上下载的pdf文件,为什么不能复制文字?

不知道大家有没有到过这种情况&#xff1f;在网上下载的PDF文件打开之后&#xff0c;发现选中文字之后无法复制。甚至其他功能也都无法使用&#xff0c;这是怎么回事&#xff1f;该怎么办&#xff1f; 当我们发现文件打开之后&#xff0c;编辑功能无法使用&#xff0c;很可能是…

AlexNet

概念 过拟合:根本原因是特征维度过多&#xff0c;模型假设过于复杂&#xff0c;参数过多&#xff0c;训练数据过少&#xff0c;噪声过多&#xff0c;导致拟合的函数完美的预测训练集&#xff0c;但对新数据的测试集预测结果差。 过度的拟合了训练数据&#xff0c;而没有考虑到…

29、卷积 - 参数 padding 的作用

在卷积过程中,Padding(填充)是一个关键的概念,它对于保留输入信息和有效地处理边缘信息至关重要。 1、Padding是什么? Padding 指的是在输入图像的周围添加额外的像素值,用来以扩大输入图像的尺寸,这些额外填充的像素值通常设置为零,卷积操作在这个填充后的输入图像上…

C#基础-结构体应用实例

目录 定义 结构有以下特点 用法实例 定义 在 C# 中,结构体是值类型数据结构。它使得一个单一变量可以存储各种数据类型的相关数据。struct 关键字用于创建结构体。 结构有以下特点 结构可带有方法、字段、索引、属性

2024年生成式人工智能发展预测

2024年生成式人工智能发展预测 2023.12.9版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 当前&#xff0c;生成式人工智能&#xff08;Generative AI&#xff0c;后面简称 Gen AI&#xff09;领域不但在持续演进&#xff0c;而且它正在彻…