深夜睡不着,第二篇随笔,说说js的创建实例化过程

  媳妇白天加班太累了,我呢,白天睡太多了,晚上太过于亢奋,自己一个人偷偷的拿着笔记本到客厅写博客~

  上一篇可能很多人看到了觉得就是个joke,那个真的是一个joke,但是在实际开发过程中,很多年轻的coder对于写不写分号很不以为然,要知道,真实生产环境下的代码要远比我栗子中给的代码要复杂得多,因此很有可能不用我的误导,你就看不出来,因此浪费了一下午的宝贵开发时间,所以写代码还是要规范一些。

  第二篇文章我依旧不想讲太过于深入的技术,还是说两个“花边新闻”,聊以自慰罢了,看官有兴致你就看,没兴致也可以喷。

  依旧是这样的一个题目:

1 var Model = function(p){
2     this.p = p;
3 };
4 var model = new Model(1);
5
6 console.log(model.constructor);
7 console.log(Model);
8 console.log(Model === model.constructor);

很简单的一个实例化过程,由于没啥心情,所以直接就不卖关子了,直接把要讲的点,给console.log出来

此处我也就不自问自答了,直接说吧,打印结果是:

function Model(p)
function Model(p)
true

到这里可能懂得人就懂我要说什么了,不懂得人还是不懂我要说什么,貌似是一句废话= =+

大家能够看到,打印的model.constructor就是Model。

对的,和所有的程序设计一样,当new一个对象的时候,会自动执行这个对象的构造函数,就是这里的Model。

然后我们做一个貌似只有js这样的变成语言才能做的事情,动态修改一下Model:

 1 var Model = function(p){
 2     this.p = p;
 3 };
 4 var model = new Model(1);
 5
 6 console.log(model.constructor);
 7 console.log(Model);
 8 console.log(Model === model.constructor);
 9
10 Model = function(x){
11     console.log(1);
12 }
13
14 console.log(model.constructor);
15 console.log(Model);
16 console.log(Model === model.constructor);

打印结果如下:

function Model(p)
function Model(p)
true
function Model(p)
function Model(x)
false

从这段代码中我们可以得知,当动态的修改Model的时候并不会影响已经被实例化出来的model对象的构造函数。

也就是说,一旦Model被实例化,那么该实例的构造函数就是确定的,并且该实例和Model已经没有半毛钱关系了。

下面我要讲的可能是有些跳跃了,就是试图自己来做一下这个过程:

1 var Model = function(p){
2     this.p = p;
3 };
4 var model = new Object();
5 model.__proto__ = Model.prototype;
6 console.log(model.constructor);
7 var model2 = new Model(1);
8 console.log(model2.constructor);9 console.log(model.constructor === model2.constructor);

打印结果我们可以看到,两者的constructor是一毛一样的

function Model(p)
function Model(p)
true

然后我们在做如下处理:

 1 var Model = function(p){
 2     this.p = p;
 3 };
 4 var model = new Object();
 5 model.__proto__ = Model.prototype;
 6 console.log(model.constructor);
 7 var model2 = new Model(1);
 8 console.log(model2.constructor);
 9 console.log(model.constructor === model2.constructor);
10
11 Model.call(model,1);
12 console.log(model);
13 console.log(model2);
14 console.log(model.constructor === model2.constructor);

打印结果如下:

function Model(p)
function Model(p)
true
Object {p: 1}
Model {p: 1}
true

也就是说此时,除了一个被打印出来是Object 一个被打印出来是Model,其他的这两个实例没有任何区别,一样的构造函数,一样的成员数量和名称

下面来让我简短的总结下这次我说了什么:

实例化一个对象实际上是先实例化了一个Object的对象model,然后把该对象的原型指向Model的原型,然后再用该对象调用Model的构造函数,从而初始化该对象的所有成员,此时该对象的构造函数和Model没有任何关系,即使动态修改了Model,也不会对model产生任何影响了。

小生才疏学浅,如有不对,还望指正!

今天就到这里了,估计也是没人看,如果有人看,我还会准备一些有意思的东西的。

时间: 2024-10-25 14:52:39

深夜睡不着,第二篇随笔,说说js的创建实例化过程的相关文章

短学期第二篇随笔

这三天明显感觉有节奏了,老师采取了先拉进度,然后纠错,这样可以给我们一个方向,明确当天的任务.很好的解决了做的快的同学被挂起,只能等老师先帮同学调试,有时候会调试到很晚,快下课才发布新任务,导致大家一起加班. 这几天做了直接查询功能,代码如下: CustomerListAction: package com.crm.action; import java.util.Map; import com.crm.service.CustomerService;import com.opensymphon

《javascript权威指南》读书笔记——第二篇

<javascript权威指南>读书笔记--第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字符集 JavaScript程序是用Unicode字符集编写. Unicode是ASCII和Latin-1的超集,支持几乎所有语言. ES3 要求支持Unicode 2.1及后续版本 ES5 要求支持Unicode 3及后续版本 2.1.1 区分大小写 JavaScript是区分大小写的. HTML 并不区分大

jquery jtemplates.js模板渲染引擎的详细用法第二篇

jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个template.html的文件来展示 <span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html> <html lang="zh-CN"> <

一件小事引发纯属自我的调节,于是有了这篇随笔

只能说今天运气差到极点了吧,也是因此,晚上十点半的现在的我也只能在word上把随笔先写好,等网好了再发出去. 原定的计划是先把周末的网页先写得差不多再直接睡觉的,结果先是PS运行不了,再是快把PS安装包下载完的时候网络又出问题了.弄来弄去结果就把心态搞炸了.在写这篇随笔的时候网络还是忽好忽坏,PS还是没有下下来.这么早就睡觉肯定是睡不着的,也是想借写随笔的过程来平复下烦躁的心情吧. 学习日近尾声,老师的节奏加快的同时,自己的节奏越发受到外界因素的影响,许久未曾谋面的烦躁又开始活跃起来了.而且由于

CSDN markdown 编辑器 第二篇 markdown简单使用

第一篇简单介绍了markdown. 第一篇地址 第二篇主要会介绍不熟悉markdown语言的人如何使用CSDN新的编辑器.这里主要介绍图形编辑器.已经掌握的人请挪步. 前面几个都非常简单.例如对字体加粗和斜体. - 或者是对 [帐前卒专栏](http://chillyc.info) 加个链接.用![连接图标](http://img.blog.csdn.net/20150312221433385) - 再者就是加个图片:![图片图标](http://img.blog.csdn.net/201503

#Java学习之路——基础阶段二(第二篇)

我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言:此随笔主要是Java基础中的基础,相信大家对这方面肯定有着自己的理解和认识,具体详解可以参照万能的baidu,有的我就一笔带过,希望在我的学习之路上能够有大牛进行指导,也有更多的小伙伴共勉. 1.collection集合 collection集合是用来存储多个数据的相比数组来说,集合的长度是可以进行

Android Metro风格的Launcher开发系列第二篇

前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如何配置Android开发环境,只是用文字和图片展示了开发Metro风格Launcher的初步设计和产品要求,这一篇文章将会从代码上讲解如何实现对应的UI效果,好了,评书开讲! Launcher主体框架实现: Launcher主体框架我选用的是大家所熟悉的ViewPager控件,因为ViewPager

[C++11新特性]第二篇

0.可变数量参数,可变函数模版,变长模版类 c++98可变数量参数 #include<cstdio> #include<cstdarg> double SumOfFloat(int count, ...) { va_list ap; double sum=0; va_start(ap,count); for(int i=0;i<count;i++) sum+=va_arg(ap,double); va_end(ap); return sum; } int main() { p

第二篇 基于微擎的模块开发—PHP

从陌生到如今能勉强完成第一个微网站模块的实现.也算是一个小小的进步,从设计数据库到,返回数据,前端模版渲染 每一点都是有点难度的.所以我想总结一下,我是如何实现一个微擎模块. 第一,首先得分析某个模块的想实现什么需求,根据需求设计合理的数据库结构. 第二,了解微擎的结构,运行流程,设计模块结构. 第三,重点就是site.php , 完成site.php 需要一定的php的编程能力, 第四,site.php 其中 通过 pdo 从数据库的获取我们想得到数据源. 微擎已封装其路由机制, doWeb