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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
关于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
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
理解javascript中的闭包
2017/01/11 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
详解python内置模块urllib
2020/09/09 Python
python绘图模块之利用turtle画图
2021/02/12 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
关于工资低的辞职信
2014/01/14 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
大学生操行评语大全
2014/12/31 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
就业推荐表院系意见
2015/06/05 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
关于感恩的作文
2019/08/26 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫