`
limu
  • 浏览: 321211 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

What's "new" in JavaScript?

阅读更多
老调重弹,在JavaScript中,遇到new操作符时执行了什么操作?
也就是说new到底创造了什么,过程是怎样的?
能否为Function对象增加一个原型方法,模拟new的操作?
Function.prototype.__new__ = function(){
	var emptyFunction = function(){};
	emptyFunction.prototype = this.prototype;
	var newObject = new emptyFunction();
	newObject.__proto__ = this.prototype;
	newObject.constructor = this.prototype.constructor;
	var returnedObject = this.apply(newObject, arguments);
	return (typeof returnedObject === 'object' && returnedObject) || newObject;
};

多数代码来自老道的<<JavaScript: the Good Parts>>
第5,6行是额外的一点补充:
第5行:所有JS对象都有__proto__属性,指向 -- 构造器的prototype. (很多浏览器是可以访问到__proto__的,ie不行.)

第6行:对象的constructor指向不一定是构造器,而是构造器的prototype对象的构造器,用一段代码说明:
function Person(name){
	this.name = name;
}
Person.prototype = {
	getName:function(){
		return this.name;
	}
}
var p = new Person("a");
alert(p.constructor === Person); //false
alert(p.constructor === Object); //true 从第4行看到Person.prototype.constructor === Object 即Person.prototype = new Object(); Person.prototype.getName = function(){..}

这样的constructor指向与constructor(构造器)的字面意义不搭,并不是我们期待的,往往会造成困扰.所以常见OO支持(YUI Kissy)通过显示的重写constructor维持对象的constructor的指向其构造器.
但在对new的模拟中,需要保持与浏览器中new的做法一致:newObject.__proto__ = this.prototype;

第2~4行:首先获取一个空的Function实例,获取构造器的prototype的引用,这就滤掉了构造器内定义的特有属性和特权方法.首要保障prototype的纯正血统.再用一段代码说明
function Person(name,age){
	this.name = name;
	this.age = age;
	this.getAge = function(){//特权方法(privileged methods) 避免其被子类继承
		return this.age
	}
}
Person.prototype.getName = function(){ //原型方法 需要被其子类集成 
	return this.name;
}//BTW: 通过这种方式为Person扩充原型方法,没有通过"="操作符为Person.prototype赋予新的对象(= new Objecct) 所以Person.prototype.constructor没有出现混乱.


第7行:在保证了新创建对象的prototype的无增无损后,这一行代码保障特有属性和特权方法是新创建对象中依然是特有的,而且特有属性和特权方法和传入构造器的参数相关,通过apply方法将构造函数功能和传入参数作用于新构建的对象之上.将构造函数的返回值放入returnedObject暂存.

第8行:新的对象已经创建好,如果returnedObject是非空对象则返回returnedObject,否则返回新创建的对象.returnedObject的这个判断也不难理解,我们可以利用这个特性创建单件(Singleton).比如这样写:
function Singleton(){
	if(Singleton.inst){
		return Singleton.inst;
	}
	Singleton.inst = this;
}
var s1 = new Singleton();
var s2 = new Singleton();
alert(s1===s2);//true


还有一个困扰,一旦Singleton前面没有new,Singleton.inst将指向window.
其实所有类都需要判断是否是通过new进入的函数体.判断的方法不复杂,可以参照YUI使用instanceof判断:
function Singleton(){
	if(this instanceof arguments.callee){ //如果没有通过new进入函数体,这里的this会指向window
		return new arguments.callee;
	}
	if(Singleton.inst){
		return Singleton.inst;
	}
	Singleton.inst = this;
}
var s1 = new Singleton();
var s2 = Singleton();
alert(s1===s2);//true

这就是为Function增加原型方法__new__来做对new操作符的模拟,可能还不完善,但对理解一些JS内部机制有帮助.要是有错误,请一定帮忙指出~
最后,推荐看一下ECMA-262-3 in Detail系列文章.
2
1
分享到:
评论

相关推荐

    JavaScript Next.pdf

    Demonstrate how JavaScript’s new features work in unison with each other Who This Book Is For New and experienced developers who wish to keep abreast of the changes to JavaScript and deepen their ...

    JavaScript.Object.Programming.148421

    JavaScript classes inherit from JavaScript's prototypes, a fact that makes JavaScript's prototypes, when used correctly, functional equivalents to C++ classes (not to prototypes in true prototypical ...

    Data Wrangling with JavaScript (2018.12出版)

    Why not handle your data analysis in JavaScript? Modern libraries and data handling techniques mean you can collect, clean, process, store, visualize, and present web application data while enjoying ...

    Mastering.JavaScript.1785281348

    - Offers an expert's eye on the latest ES6 features and how these advanced tasks fit together in JavaScript as a whole Book Description JavaScript is a high-level, dynamic, untyped, lightweight, and...

    Speaking JavaScript

    Why JavaScript? Chapter 3. The Nature of JavaScript Chapter 4. How JavaScript Was Created Chapter 5. Standardization: ECMAScript Chapter 6. Historical JavaScript Milestones Part III: JavaScript in ...

    JavaScript Object Programming(Apress,2015)

    JavaScript classes inherit from JavaScript’s prototypes, a fact that makes JavaScript’s prototypes, when used correctly, functional equivalents to C++ classes (not to prototypes in true ...

    Packt.Object-Oriented.JavaScript.3rd.Edition

    the new features added in ES6 Find out about ECMAScript 6’s Arrow functions, and make them your own Understand objects in Google Chrome developer tools and how to use Them Use a mix of prototypal ...

    Test-Driven JavaScript Development

    It is about writing JavaScript that works in a wide variety of environments and that doesn’t get in your user’s way. How This Book is Organized This book has four parts. They may be read in any ...

    JavaScript: Moving to ES2015

    This course offers an expert's eye on the latest ES6 features and how these advanced tasks fit together in JavaScript as a whole Discover robust JavaScript implementations of classic and advanced ...

    Object Oriented JavaScript(PACKT,3ed,2017)

    the new features added in ES6 Find out about ECMAScript 6’s Arrow functions, and make them your own Understand objects in Google Chrome developer tools and how to use Them Use a mix of prototypal ...

    Drupal 6 JavaScript and JQuery

    Drupal 6 is loaded with new features, and not all of them are necessarily implemented in PHP. This unique book, for web designers and developers, will take you through what can be done with JavaScript...

    Javascript.Object.Oriented.Programming.pdf

    JavaScript is the behavior, the third pillar in today's paradigm that looks at web pages as something that consists of : content (HTML), presentation (CSS), and behavior (JavaScript). Using JavaScript...

    [jQuery] jQuery & JavaScript 口袋书 (英文版)

    This hands-on guide gets straight to the essence of what’s new and important in jQuery and JavaScript, and what you need to know to build new web solutions or migrate existing sites to jQuery. ...

    Advanced.Game.Design.with.HTML5.and.JavaScript.1430258004

    Level-up: New JavaScript Tricks Chapter 2. The Canvas Drawing API Chapter 3. Working with Game Assets Chapter 4. Making Sprites and a Scene Graph Chapter 5. Making Things Move Chapter 6. ...

    3D Game Programming for Kids: Create Interactive Worlds with JavaScript, 2nd

    You know what’s even better than playing games? Programming your own! Make your own online games, even if you’re an absolute beginner. Let your imagination come to 3D life as you learn real-world ...

    Pro JavaScript Techniques (2nd)

    Pro JavaScript Techniques is the ultimate JavaScript book for today's web developer. It provides everything you need to know about modern JavaScript, and teaches you what JavaScript can do for your ...

    Web Developer's Reference Guide(PACKT,2016)

    Write JavaScript extensibly using jQuery-JavaScript’s feature-rich library Delve into the key Node.js modules used in JavaScript server-side programming Access AngularJS ‘s important modules, ...

    Web Developer's Reference Guide

    side scripting in your web applicationsDiscover new ways to develop your website's front end quickly and easily using BootstrapWrite JavaScript extensibly using jQuery-JavaScript's feature-rich ...

    Source.Code.Analytics.With.Roslyn.and.JavaScript.Data.Visualization

    This concise 150 page book will help you create and use practical code analysis tools utilizing the new features of Microsoft’s Roslyn compiler to understand the health of your code and identify ...

Global site tag (gtag.js) - Google Analytics