`
rockyuse
  • 浏览: 191963 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

理解js中的new

 
阅读更多

 

new 操作符

在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在Javascript中,我们将这类方式成为Pseudoclassical。
基于上面的例子,我们执行如下代码

 


var obj = new Base();

这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:

new操作符具体干了什么呢?其实很简单,就干了三件事情。

 


var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

第一行,我们创建了一个空对象obj
第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id成员变量,这个成员变量的值是”base”,关于call函数的用法,请参看陈皓《Javascript 面向对象编程》文章

 


如果我们给Base.prototype的对象添加一些函数会有什么效果呢?
例如代码如下:

 


Base.prototype.toString = function() {
    return this.id;
}

那么当我们使用new创建一个新对象的时候,根据__proto__的特性,toString这个方法也可以做新对象的方法被访问到。于是我们看到了:
构造子中,我们来设置‘类’的成员变量(例如:例子中的id),构造子对象prototype中我们来设置‘类’的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符,模拟出类和类实例化的效果。

 

分享到:
评论

相关推荐

    javascript中的new使用

    理解这一点很重要,很多javascript教程为了让读者更容易理解,会套用他们常用的类模式中的概念,这 样反而让大家产生歧义。 先进段代码, 代码如下: function employee(){ this.name=””; this.dept=””; } ...

    详解JavaScript中new操作符的解析和实现

    主要介绍了JavaScript中new操作符的解析和实现,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下

    悟透JavaScript(理解JS面向对象)(四)

    我们就可以这样理解,JavaScript先用new操作符创建了一个对象,紧接着就将这个对象作为this参数调用了后面的函数。其 实,JavaScript内部就是这么做的,而且任何函数都可以被这样调用!但从 “anObj = new MyFunc()...

    谈谈JavaScript的New关键字

    原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些。...

    js 原型对象和原型链理解

    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...

    【JavaScript源代码】JavaScript中的Proxy对象.docx

    JavaScript中的Proxy对象  Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。 语法 const proxy = new Proxy(target, handler);  target: 要使用Proxy包装的目标...

    forms.js:轻巧,易于理解的Javascript表单验证库

    Forms.js 轻巧,易于理解的Javascript表单验证库概述Forms.js允许您验证HTML表单和字段中的输入。 这是通过使用两个主要对象来完成的:* Form-任何元素* Field-任何元素,<textarea>或HTML元素,无论它们是否...

    JavaScript replace new RegExp使用介绍

    今天没什么事做,把javascript中replace方法讲解一下,如果讲得不对或不合理是情理之中的事,因为我不是老鸟,也不是菜鸟,我也不知道我当底是什么鸟??呵~~ replace方法的语法是:stringObj.replace(rgExp, ...

    解析Javascript中难以理解的11个问题

    1.原始值与引用值 原始值存放在栈里, 引用值存放在堆里. 如程序: 代码如下:function Person...var person = new Person(100,”笨蛋的座右铭”,25); 2.undefined和null undefined: 变量未定义; 是Undefined类

    理解javascript中的回调函数(callback)

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用。如果这个概念理解不了,nodejs、express 的代码就会看得一塌糊涂。...首先要了解,在 js 中,函数也是对象,可以赋值给变量,可以作为

    简单理解JavaScript中的封装与继承特性

    JavaScript中的封装 封装简单地说就是让外界只能访问对象的共有变量和函数,隐藏细节和数据。 js中有三种方法创建对象,分别为门户大开型、用命名规范区分私有变量、闭包创建真正的私有变量三种。 1.门户大开型,是...

    理解JavaScript中的对象 推荐

    代码如下: var Programmer = new Object(); Programmer.name = “Young”; Programmer.age = 25; alert(Programmer.name + ” : ” + Programmer.age); JavaScript对象完全不同于c#或vb对象,JavaScript...

    重新理解JavaScript的六种继承方式

    JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。...

    javascript中的原型链深入理解

    在javascript中,函数就有2个功能 第一、 作为一般函数调用 第二、 作为它原型对象的构造函数 也就new() 我们来看一个例子 代码如下: function a(){ this.name = ‘a’; } 当创建一个函数,它会发生什么呢? 第一、...

    一分钟理解js闭包

    什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc();...var c = new a(); c.inc(); //控制台输出1 c.inc(); //控制台输出2 简单吧。

    全面理解JavaScript中的继承(必看)

    JavaScript中我们可以借助原型实现继承。 例如 function baz(){ this.oo=""; } function foo(){ } foo.prototype=new baz(); var myFoo=new foo(); myFoo.oo; 这样我们就可以访问到baz里的属性oo啦。在实际使用中...

    理解javascript中的原型和原型链

     大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype 原型模型。代码实现大概是这样子的 function Student(name){ this.name = name; } var Kimy = new Student("Kimy"); Student.prototype.say...

    理解Javascript_07_理解instanceof实现原理

    instanceof原理 照惯例,我们先来看一段代码: 代码如下: function Cat(){} Cat.prototype = {} function Dog(){} Dog.prototype ={} var dog1 = new Dog(); alert(dog1 instanceof Dog);//true alert(...

    我所理解的JavaScript中的this指向

    JS 中的 this 指向是一个经常被问到的问题,网上也有很多文章是关于 this 的。本文整理一下我理解下的 this 以及一些我比较疑惑的关于 this 问题。 this 指向 有几个 this 的指向问题是几乎每篇文章都会说的,比如...

    深入理解JavaScript中Ajax

    Ajax不是一种新的编程语言,...在浏览器中创建对象(只支持IE7及更高的版本): var xhr = new XMLHttpRequest(); XHR的用法 首先要介绍的是open()方法。它接收3个参数: •要发送的请求的类型(POST、GET等)

Global site tag (gtag.js) - Google Analytics