深入理解javascript new的机制

我们在使用对象的时候,除了一些浏览器内置的单体对象可以直接使用外,都会new一个出来使用。

1.最简单的莫过于如下获取一个Object对象实例

var obj = new Object();

说明:此时的new关键字干了最有用的一件事就是,继承了所有Object.prototype上的方法,这个可以去查看一下es5的参考资料中Object.prototype的方法列表。也就是说此时的obj对象可以使用所有继承而来的方法了!

2.然而是构造函数模式让我们对new有了一个深入的了解!

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    }
}
var person1 = new Person("wang",23);
var person2 = new Person("jiang",24);
var person3 = new Person;//当不传参数的时候

我们很容易知道构造函数使得每个实例都独自获取了一份属性和方法。但是这是怎么实现出来的呢?

new过程中发生了什么?

1).创建一个对象。

2).将构造函数的作用域赋给新对象(因此this就指向了新对象)

3).执行构造函数中的代码(为新对象添加属性)

4).返回新对象

值得注意的是它们的继承关系是:person1/person2/person3继承于Person,而Person继承于Object(一切对象皆继承于Object)

如果理解了上面的东西,在一些简单编程中遇到new,基本也够了。

下面继续继续介绍一些有关new的话题

3.模块模式(Moudle模式),下面讲解一个最简单的模块模式例子

var Calculator = function (eq) {
    //这里可以声明私有成员
    var name = 2;
    var eqCtl = document.getElementById(eq);

    return {
        // 暴露公开的成员
        name : name,
        add: function (x, y) {
            var val = x + y;
            eqCtl.innerHTML = val;
        }
    };
};
var c1 = new Calculator(‘eq‘);
var c2 = new Calculator(‘la‘);
c1.name = 3;//c1的name属性改变了却不会影响c2的name属性
console.log(c1);
console.log(c2);
c1.add(2, 2);

值得注意的是,在Calculator这个构造函数中返回了一个对象!

说明:如果构造函数中返回了一个对象,(第4步)那么new出来的对象将会被返回的对象覆盖。模块模式的结果是c1和c2都从返回的对象copy了一份属性和方法,它们之间互不影响。

继承关系也变了,c1和c2都直接继承于Object

时间: 2024-10-17 03:18:25

深入理解javascript new的机制的相关文章

理解JavaScript的执行机制

一直没有深入了解过JavaScript的事件执行机制,直到看到了这篇文章:<这一次,彻底弄懂JavaScript执行机制> 才发觉熟悉JavaScript的执行机制非常重要. 毕竟在跟进项目中偶尔需要排查为什么会出现函数执行顺序不一样的情况. 感谢作者浅显易懂的文字让我获益匪浅,以下是自己对JavaScript执行机制的理解,全是流水账. 文章主要叙述: 1:单线程和异步任务 2: 异步任务的分类 3:setTimeout 和 setInterval 的执行方式 单线程和异步任务 JavaSc

深入理解JavaScript事件循环机制

前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. Ther

JavaScript可否多线程? 深入理解JavaScript定时机制

http://www.phpv.net/html/1700.html JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是Java

全面理解Javascript中Function对象的属性和方法

函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这些属性和方法,这对于理解Javascript的继承机制具有一定的帮助. 属性(Properties) arguments 获取当前正在执行的 Function 对象的所有参数,是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length.还有就是arguments对象存储的是实际传递给

我想这次我真的理解了 JavaScript 的单线程机制

今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触了单线程模型相关的东西,但当时理解得并不是很清楚和明白.所以这道面试题也没有给出一语中的的答案.重新阅读阮一峰的 <JavaScript 运行机制详解>和我之前写的<setTimeout 异步与回调>之后.我决定重新写一篇博客来更加白话的总结 JS 的单线程机制和异步. 重演历史 -

十分钟理解JavaScript引擎的执行机制

关注专栏写文章 十分钟理解JavaScript引擎的执行机制 方伟景 千锋前端开发推动市场提升的学习研究者. 4 人赞同了该文章 首先,请牢记2点: JS是单线程语言 JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问:JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢? 技术的出现,都跟现实世界里的应用场景密切相关的.同样的,我们就结合现实场景,来回答这三个问题. (1) JS为什么是单线程的? JS最初被设计

深入理解javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

Javascript引擎单线程机制及setTimeout执行原理说明

setTimeout用法在实际项目中还是会时常遇到.比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何改变而忽略这两句话,因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了(虽然速度很快可能无法被察觉). 总之,setTimeout增加了Javascript函数调用的灵活性,为函数执行顺序的调度提供极大便利. 然后,我们从基础的层面来看看:理解J

轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解析),但吃的时候还是一口一口的吃(JS逐行执行)! OK,解决下面五个问题,JS预解析就算过了~~(前提:对JS变量作用域有清晰理解) 一.JS预解析是什么? 其实就是对程序要用到的材料(变量,函数)给一个初始值,并存到一个表中(我自己虚构的),当程序运行到那一行时,就来这个表看有没有初始值,没有就