js到底new了点啥
在最开始学习js的时候,我看书上写着,创建一个数组,一个对象通常使用new,如下:
var arr=new Array(),//arr=[]
obj=new Object();//obj={}
到了后来,我们开始进行面向对象的学习的时候就开始遇到下面的代码:
function Qwe(id) {
this.id = id;
}
Qwe.prototype.name = 'qwe';
Qwe.prototype.age=18;
var asd = new Qwe(2);
有一点基础的同学就可以得知我们按照Qwe的样子制作了一个asd,并且给了他一个独一无二的id为2。在这简单的几个代码中,我们就完成了对一个数组或者对象的创建,而new究竟在其中做了点啥呢?
根据英语的字面意思翻译,new的意思是新的,也就是说创建arr,并且给arr赋值为新的数组(obj同理)。其实不然,我们在new的过程中只是模仿一个模子(Array也好,Object也罢)新建了一个对象,并且继承了我们所使用的模子的一些方法和内容。
function Qwe(id) {
this.id = id;
}
Qwe.prototype.name = 'qwe';
Qwe.prototype.age=18;
var asd = new Qwe(2); asd.id//
asd.name//'qwe'
asd.age//18
就拿上面的asd来说,它的id是构造函数Qwe设置的,除此之外所有的属性和方法都是继承自Qwe的原型对象——prototype属性。
如果你上面的没看懂,那我就用通俗的语言来讲解一下。
高中的时候其实很学渣,渣到上课天天玩手机(至于后来奋发图强混进一本院校是后话),当时玩了一款qq家园里面叫《江湖ol》的游戏。当时我玩的那个区是五区,仗着网速好手机好在那个区也算是排行榜前几的玩家。当时情人节搞活动,抽奖送坐骑情情兔,现在看来只不过是一堆可能有规律的乱码而已。因为时间过去很久了,我也无法完全想起所有,大概就是:
情情兔
编号:00001
速度:50
防御:37
敏捷:21
攻击力:37
生命值:500
因为我获得的是当时的全区第一个情情兔,所以我的编号是00001。用现在的眼光来看,无非是以下的样子:
情情兔 = {
编号: 00001,
速度速度: 50,
防御: 37,
敏捷: 21,
攻击力: 37,
生命值: 500,
}
当我后来研究我和我朋友的装备的时候,我发现我的天字一号马和朋友的天字n号马的属性居然只有编号的差别!!!那么,无良的同行在制作这个坐骑的时候大概就是改一下编号吧:
var 情情兔数组=[];//安置情情兔坐骑
for(var i=0;i<1000;i++){
var 情情兔 ;
情情兔 = {
编号: i,//差别在此
速度速度: 50,
防御: 37,
敏捷: 21,
攻击力: 37,
生命值: 500,
}
情情兔数组.push(情情兔);
}
加载生产(情情兔数组);//制作了大批量的有编号的情情
但是问题是,在这个伪代码中,我们要重复创建1000次的情情兔,然后给它赋值的对象值的属性仅仅有一个是不同的,这样就造成了一定意义上的浪费。作为一个勤(lan)奋(duo)的程序员,这种问题我们应为这样去做:
var 情情兔数组=[];//安置情情兔坐骑
for(var i=0;i<1000;i++){
var 情情兔 ;
情情兔=new 情情兔模板(i);
情情兔数组.push(情情兔);
}
加载生产(情情兔数组);//制作了大批量的有编号的情情
因此,我们可以先创造一个坐骑原型——情情兔模板,在这个里面的prototype呢我们放置所有相同数值的属性为新创建的对象提供可以继承属性的路径或者说目标。我们用new来实现一下:
function 情情兔模板(id){
this.id=id
}
情情兔模板.prototype.速度=50
情情兔模板.prototype.防御=37 情情兔模板.prototype敏捷=21
情情兔模板.prototype攻击力=37
情情兔模板.prototype生命值=500
var 情情兔1=new 情情兔模板(1)
//情情兔1={编号:1,速度速度:50,防御:37,敏捷:21,攻击力:37,生命值:500}
OK,一个简单的情情兔模板就诞生了。
但是到了这里,有的同学就要问了,既然是下面都是属性,那么为什么不直接就写一个LoveRabbit.prototype={速度速度=50,防御=37,敏捷=21,攻击力=37,生命值=500}呢?其实当我们打印很多对象或者别的东西的prototype时候,会发现有一个叫做constructor的属性,字面翻译的意思就是构造函数,这个属性的值呢就是new后面的字样,也就是说,其实我们看到的种种都是一个构造函数,毕竟在js的世界中,后缀是()的大部分都是一个运行的函数。
那么我们就可以猜测了:在这个函数中,一开始呢我们肯定会创建一个新的对象,对象没有prototype属性,只有函数有prototype属性。每个对象的__proto__属性指向自身构造函数的prototype,也就是我们把新制造的对象的__proto__赋值为构造函数的prototype。当然呢,我们会给这个对象新加别的属性。
因此,在上一步的情情兔模板的new的函数中,其实应该是这样的:
function 情情兔模板(id){
var 新情情兔 = {}
新情情兔 .__proto__ = 情情兔模板.prototy'pe
新情情兔 .id= id
return 新情情兔
}
情情兔模板.prototype = {
constructor:情情兔模板,//非常重要的一条,因为我们要知道构造函数,也就是来源。
速度速度:50,
防御:37,
敏捷:21,
攻击力:37,
生命值:500
}
在上面我们可以看出区别,new在这个构造函数中做了啥呢:
1.首先,先创建了一个新的对象。
2.然后呢,把构造函数的公共的属性复制了一份给这个新对象,这也就是prototype——原型。
4.接着把私有属性赋赋值,毕竟创建就要造个独一无二的。
3.返回这个新的对象。
在es6中,我们引入了class类这个概念,上面的代码我们可以写为:
class 情情兔模型 {
constructor(id) {
this.编号 = id;
this.速度=50;
this.防御=37;
this.敏捷=21;
this.攻击力=37;
this.生命值=500;
}
}
var 情情兔=new 情情兔模型(1)
其实,class也是一个语法糖,里面有一个构造函数constructor,原理上是和es5的类似的。
终于,我们就可以愉快地通过new来大批量的创建各种新的对象了。
由此观之,new就是一个语法糖,为了更好地节省代码,来体现程序员的聪(lan)明(duo)。
如果您觉得我的博文有用,请不要吝啬您的赞和关注。如需转载,请标明出处,谢谢。
js到底new了点啥的更多相关文章
- 【转】Node.js到底是用来做什么的
Node.js的到底是用来做什么的 在阐述之前我想放一个链接,这是国外的一个大神,对于node.js非常好的一篇介绍的文章,英文比较好的朋友可以直接去阅读,本文也很大程度上参考了这篇文章,也同时感谢知 ...
- Angular、React.js 和Node.js到底选谁?
为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情 ...
- Node.js到底是什么
接触前端也有一段时间了,逐渐开始接触Node.js,刚刚接触Node.js的时候一直都以为Node.js就是JavaScript,当对Node.js有一定的了解之后,其实并不然两者之间有关系,其中的关 ...
- Node.js到底是做什么的?这是我看到最好的解释了
作者:贾厂长链接:https://www.zhihu.com/question/33578075/answer/56951771来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 「标准」的 JS风格
首先,这份 JS风格指南已经在我司的前端团队实行半年多了: 其次,在程序员的世界里,从入行到资深都需要面对几个世界级的难题,如: 世界上最好的编辑器是什么? 是用空格还是 TAB?用空格还特么衍生出 ...
- Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
- 让我欲罢不能的node.js
从我大一接触第一门编程语言C开始,到现在工作三年陆续接触到了C.汇编.C++.C#.Java.JavaScript.PHP,还有一些HTML.CSS神马的,从来没有一门语言让我像对node.js一样的 ...
- NODE.JS学习的常见误区及四大名著
NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...
- js的动态加载、缓存、更新以及复用(二)
上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...
随机推荐
- 【开发技术】json
json(JavaScript Object Notation) JavaScript对象符号是一种结构化轻量级的数据传输格式,很多场合替代XML文件格式 JSON格式化校验:http://www.b ...
- Jade报错:Invalid indentation,you can use tabs or spaces but not both问题
现象:通过html生成jade文件之后,更改jade文件时,语句没什么问题的情况下,jade文件编译不通过,报错:Invalid indentation,you can use tabs or spa ...
- CCF系列之模板生成系统( 201509-3 )
试题名称: 模板生成系统 试题编号: 201509-3 时间限制: 1.0s 内存限制: 256.0MB 问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同的数据记录,但是页面的 ...
- python基础5之装饰器
内容概要: 一.装饰器前期知识储备 1.python解释函数代码过程: python解释器从上往下顺序解释代码,碰到函数的定义代码块不会立即执行它,而是将其放在内存中,等到该函数被调用时,才执行其内部 ...
- Linuxc - 通过管道,让小程序更有活力
通过管道,让小程序更有活力 root@jiqing:~/cspace/les6# ls avg.c avg.out input.c input.out 一个负责输入,一个负责统计平均值 avg.c # ...
- SuperMap iClient for JavaScript初入
SuperMap iClient for JavaScript初入 介绍SuperMap for Js的简单使用. 推荐先看下这篇文档:SuperMap iClient for JavaScript ...
- MyISAM 存储引擎的特点及优化方法
MyISAM: MyISAM 管理非事务表.是ISAM 的扩展格式.除了提供ISAM里所没有的索引的字段管理等的大量功能.MyISAM 还使用一种表格锁定的机制.来优化多个并发的读写操作.My ...
- 通过编程为Outlook 2007添加邮件规则
Outlook 所支持的邮件规则相当有用,我们经常需要针对某些特征的邮件做特殊的处理.例如将其移动到某个特定文件夹,或者删除它等等. Outlook所支持的邮件规则主要两大类:收到邮件时和发送邮件时 ...
- 在Intellij IDEA 中clean报错:-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.
解决办法:添加VM属性 -Dmaven.multiModuleProjectDirectory=$M2_HOME
- html5中的新标签
header <header> 标签定义文档的页眉(介绍信息). nva 根据W3C的定义规范:nav元素是一个可以用来作为页面导航的链接组: <nav><ul>& ...