先上段代码:

     function People(name) {
this.name = name;
} People.prototype.sayName = function () {
console.log(this.name);
} var man1 = new People('xiaos');
console.log(man1.name)
man1.sayName();

接下来我们分析下上述代码:

1. 1-3行我们创建了一个People的函数,应为将来要用作构造函数来实例化对象,所以首字母大写(这是好的习惯,也是一种默认的都会遵守的规定吧)

2. 5-7在People的原型对象上添加了sayName方法,什么是原型对象呢?会有另外一篇文章来单独介绍,后续补充~~

3. 第9行,使用new运算符实例化了一个man1对象。这是我们这篇要研究的问题,下面会详细阐述~

4. 第10行打印输出man1的name,第11行调用man1的sayName方法

那么问题来了,分析4中为什么能取到name属性和sayName方法呢??其实,这关键在于第3步,new的作用。

那么new究竟做了什么呢?大致分三步,我们用代码分析下过程吧:

 var obj = {}; // 首先创建一个空的对象

 obj.__proto__ = People.prototype; // 将空对象的__proto__指向构造函数的原型对象,也就是这句导致上面实例化的对象man1拥有了sayName方法,其实这里是继承了原型对象上的sayName方法
People.call(obj, 'xiaos'); // 调用People的构造方法,也就是这句导致man1拥有了name属性,有关call用法,本篇暂不介绍了,后续补充;这里简单理解就是People中的this变成了obj return obj; // 返回对象,此刻man1来接收,所以就同时拥有了People的构造函数中的属性还有原型上的方法

js 理解new的运行机制的更多相关文章

  1. <转>ASP.NET学习笔记之理解MVC底层运行机制

    ASP.NET MVC架构与实战系列之一:理解MVC底层运行机制 今天,我将开启一个崭新的话题:ASP.NET MVC框架的探讨.首先,我们回顾一下ASP.NET Web Form技术与ASP.NET ...

  2. 深入理解struts的运行机制

    扫码关注公众号,不定期更新干活 在此申明本博文并非原创,原文:http://blog.csdn.net/lenotang/article/details/3336623,本文章是在此文章基础上进行优化 ...

  3. 理解PHP的运行机制

    PHP是一种纯解释型在服务端执行的可以内嵌HTML的脚本语言,尤其适合开发Web应用程序.请求一个 PHP 脚本时,PHP 会读取该脚本,并将其编译为 Zend 操作码,这是要执行的代码的一种二进制表 ...

  4. JS核心系列:理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  5. v8是怎么实现更快的 await ?深入理解 await 的运行机制

    最近v8团队发表一篇博客Faster async functions and promises, 预计在v7.2版本实现更快的异步函数和promise. 文章内容看起来不是很容易理解,背后的原理比较隐 ...

  6. HttpModule的认识与深入理解及MVC运行机制

    转自:http://kb.cnblogs.com/page/50130/ ASP.NET MVC架构与实战系列之二:理解MVC路由配置 http://www.cnblogs.com/jyan/arch ...

  7. JS运行机制之 Event Loop 的思考

    先举个栗子,如下: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log('i: ',i); //一秒之后输出几乎没 ...

  8. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  9. 简述JavaScript的运行机制

    想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...

随机推荐

  1. 搜狗输入法wp风格皮肤

    换了个nexus 发现输入法真的没有wp的好用 没办法,刚好搜狗输入法有定制皮肤的选项,所以自己做了个wp风格的输入法皮肤. 一点微小的工作 http://pan.baidu.com/s/1kVsHd ...

  2. 计算程序总行数的Python代码

    最近需要统计一下项目中代码的总行数,写了一个Python小程序,不得不说Python是多么的简洁,如果用Java写至少是现在代码的2倍. import os path="/Users/ron ...

  3. 使用jQuery Draggable和Droppable实现拖拽功能

    上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...

  4. jQuery之empty、remove、detach

    三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes ...

  5. 重新理解:ASP.NET 异步编程

    相关博文: 异步编程 In .NET(回味无穷!!!) ASP.NET sync over async(异步中同步,什么鬼?) 本来这篇博文想探讨下异步中的异常操作,但自己在做异步测试的时候,又对 A ...

  6. Mysql5.0没有nvarchar,national

    mysql采用utf-8编码,而传统的数据库采用unicode,一个汉字要用两个unicode的char,而在mysql中由于使用了utf-8,所以无论汉字还是字母,都是一个长度的char,所以就不用 ...

  7. 【JAVA】基于MVC架构Java技术荟萃案例演练

    基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...

  8. Handle类与线程

    首先声明Handle对象和该类的handleMessage方法: Handler BarHandler = new Handler(){ @Override public void handleMes ...

  9. Javascript数组常用方法

    一.forEach对数组的遍历 二.map返回经过运算的新数组 三.filter返回满足条件的新数组 四.返回数组前后元素运算的结果 五.every遍历数组每项元素是否满足某个条件,全部满足返回tru ...

  10. vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度

    最近用element来做项目,在开发的过程中,突然发现页面的操作和切换在数据量大的时候相当卡,后来提了个issue,在furybean解答后才知道,我每个单元格都加了tooltip,会生成大量的节点, ...