javascript如何实现create方法


Posted in Javascript onNovember 04, 2019

这篇文章主要介绍了javascript如何实现create方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1. 背景

项目使用 easyui + jquery作为前端框架,之前基本上是些后端代码设计,前端涉略仅限于应用。

项目js是之前部门领导写的一个框架,使用面向过程方法进行编码,前端代码耦合较深,修改起来捉襟见肘。

希望以统一方式对jquery代码进行设计管理,有必要对jquery源码有一定程度了解。

理解代码最好的方式,本人感觉应该是造简化版轮子。大致理解原型链之后,本文参考引用博文时限一个create函数。

2. 实现

javascript如何实现create方法

构造函数的constructor属性在声明以后自动赋值为自身,同时People的__proto__属性赋值为Function.prototype。

javascript如何实现create方法

使用new方式和Function.call方式创建的对象在原型上存在区分。

javascript如何实现create方法

new方式对象__proto__属性指向其构造函数prototype对象,Function.call方式对象__proto__属性指向Object的prototype对象。

因此Function.call()方式创建对象只要修改__proto__属性指向,私认为等价于new方式创建对象,代码如下。

function create(){
  // 1. 创建一个空对象
  let obj = {};
  
  // 2. 获取构造函数
  let constructor = [].shift.call(arguments);

  // 3. 链接到原型
  obj.__proto__ = constructor.prototype;

  // 4. 绑定this值
  let result = constructor.apply(obj, arguments);

  // 5. 返回新对象
  return typeof result==='object' ? result : obj;
}

调用方式为

var people = create(People,'Bob',22);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
7个JS基础知识总结
Mar 05 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
经典大学生求职信范文
2014/01/06 职场文书
大型会议策划方案
2014/05/17 职场文书
关于保护环境的标语
2014/06/09 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android