javascript如何实现create方法

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

1. 背景

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

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

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

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

2. 实现

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

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

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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript轻量级库createjs使用Easel实现拖拽效果

    我就把我学习Createjs的一些心得体会向大家分享下: 一.什么是CreateJS? createjs是一个轻量级的javascript库,是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,利用createjs可以构建出许多有趣的动画游戏.例如围住神经猫,看你有多色等Html5游戏. 二.CreateJS有哪几款工具? createjs里面共有四大引擎: EaselJS:主要用于动画.向量及位图的绘制.提供支持移动设备触控的一系列方法(click.mousedown.pressup.

  • 详解Nodejs 通过 fs.createWriteStream 保存文件

    工作中难免会遇到处理大文件的时候,有这种stream的处理方式,就不需要一次处理太大的文件,从而导致内存不够用,或者内存占用太多. fs.createWriteStream 似乎不会自己创建不存在的文件夹,所以在使用之前需要注意,保存文件的文件夹一定要提前创建. const path = '/xxxxxx/ddd/'; if (!fs.existsSync(path)) { fs.mkdirSync(path); } 创建完文件夹,我们就可以进行文件添加操作了.我们希望在使用文件添加操作的时候是

  • node.js中的fs.createReadStream方法使用说明

    方法说明: 返回一个readStream(文件读取流,输入流)对象.(可读流) 语法: 复制代码 代码如下: fs.createReadStream(path, [options]) 由于该方法属于fs模块,使用前需要引入fs模块(var fs= require("fs") ) 接收参数: path: (string) 欲读取的文件路径 options : (object) 数组对象包含以下属性 复制代码 代码如下: { flags: 'r',   encoding: null,  

  • javascript中createElement的两种创建方式

    本文实例讲述了javascript中createElement的两种创建方式.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CreateElement

  • vue.js中created方法作用

    vue.js中created方法作用

    这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数,方便开发者在不同阶段处理不同逻辑. 一般可以在created函数中调用ajax获取页面初始化所需的数据. 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM

  • node.js中的http.createServer方法使用说明

    方法说明: 该函数用来创建一个HTTP服务器,并将 requestListener 作为 request 事件的监听函数. 语法: 复制代码 代码如下: http.createServer([requestListener]) 由于该方法属于http模块,使用前需要引入http模块(var http= require("http") ) 接收参数: requestListener   请求处理函数,自动添加到 request 事件,函数传递两个参数: req  请求对象,想知道req有

  • 浅谈js图片前端预览之filereader和window.URL.createObjectURL

    浅谈js图片前端预览之filereader和window.URL.createObjectURL

    浅谈js图片前端预览之filereader和window.URL.createObjectURL //preview img : filereader方式 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile').files[0]; var fr = new FileReader(); fr.onload = function(ele){ va

  • js动态生成Html元素实现Post操作（createElement）

    有时,你需要Post数据到另一个页面上,那么你就需要构建一个Form表单 <form id="postform" name="postform" method="post"> <input name="msg" value=""/> </form> 复制代码 代码如下: document.write("<form ..." //document.

  • javascript如何实现create方法

    javascript如何实现create方法

    这篇文章主要介绍了javascript如何实现create方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 背景 项目使用 easyui + jquery作为前端框架,之前基本上是些后端代码设计,前端涉略仅限于应用. 项目js是之前部门领导写的一个框架,使用面向过程方法进行编码,前端代码耦合较深,修改起来捉襟见肘. 希望以统一方式对jquery代码进行设计管理,有必要对jquery源码有一定程度了解. 理解代码最好的方式,本人感觉应该是

  • JavaScript多线程的实现方法

    注:以下内容基于IE中GIF的onload事件的基础上,故所有测试IE only 需要用到的几个图片 先看一个简单的事实: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> var img=new Image(); img.src="attachment/1178365293_0.gif"; img.onload=function() { alert("如要关闭请按住ESC键不放,并点击关闭按钮");

  • Javascript中的call()方法介绍

    在Mozilla的官网中对于call()的介绍是: 复制代码 代码如下: call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. Call() 语法 复制代码 代码如下: fun.call(thisArg[, arg1[, arg2[, ...]]]) Call() 参数 thisArg 复制代码 代码如下: 在fun函数运行时指定的this值.需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nul

  • ThinkPHP表单数据智能写入create方法实例分析

    本文实例讲述了ThinkPHP表单数据智能写入create方法.分享给大家供大家参考.具体如下: 创建数据对象 create() 除了手动构造入库的数据集之外,ThinkPHP 还提供了自动创建数据对象的 create() 方法.create() 方法将自动收集提交的表单数据并创建数据对象而无需人工干预,这在表单数据字段非常多的情况下更具优势. 将前文写入表单数据的例子用 create() 来实现: public function insert2(){ header("Content-Type:

  • JavaScript类的继承方法小结【组合继承分析】

    本文实例讲述了JavaScript类的继承方法.分享给大家供大家参考,具体如下: 在JavaScript 里,被继承的函数称为超类型(父类,基类也行,其他语言叫法),继承的函数称为子类型(子类,派生类).继承也有之前问题,比如字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数. 为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术,或者成为对象冒充(伪造对象.经典继承)的技术来解决这两种问题. function aObj(){ this.name

  • 利用JavaScript构建树形图的方法详解

    利用JavaScript构建树形图的方法详解

    目录 什么是树形图 浏览JS树形图 创建一个基本的JS树形图 1. 创建一个HTML页面 2. 参考JavaScript文件 3.设置数据 4. 编写一些JS树形图代码 自定义JS树形图 A. 改变颜色 B. 应用线性色标 C. 格式化标签和工具提示 D. 按升序排列图块 树形图可视化广泛用于分层数据分析.如果你没有经验还想创建一个,那将会有些复杂.下面是一个详细教程,教你如何使用JavaScript创建交互式树形图. 宇宙中只有我们吗?我们每个人都曾在某个时候问过自己这个问题.当我们在考虑地球

  • JavaScript数据类型检测实现方法详解

    目录 一.typeof 二.instanceof 三.Object.prototype.toString.call() 面试问题 一.typeof 优点:能快速判断基本数据类型,除了 Null: 缺点:不能判别 Object.Array.Null ,都返回 object:判别引用类型除函数显示 function外,其他显示为 object console.log(typeof 55); // number console.log(typeof true); // boolean console.

  • ASP.NET调用javascript脚本的常见方法小结

    1.直接在前台调用 javascript 函数 很简单,在 head 元素之间加入 script 元素,将 type 元素设置为 " text/javascript " 如: 复制代码 代码如下: <head runat="server"> <script type="text/javascript" > function ShowName(str) { alert("您的名字为:("+str+&quo

  • JavaScript弹出窗口方法汇总

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新. 而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form, 则不会弹出提示窗口 如果页面有form表单, a)<form  method="post" ...>     会弹出提示窗口 b)<form  method=&quo

  • javascript中一些util方法汇总

    javascript中一些util方法汇总 /***************原生对象工类方法****************/ /** * 判断非空 * @param obj * @returns {boolean} */ function isEmpty(obj) { if (obj == undefined || obj == null || new String(obj).trim() == '') { return true; } else { return false; } } /**

随机推荐