最近偶然碰到有朋友问我"hoisting"的问题。即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的。可以看看这个例子:
大家第一眼看到这个例子觉得输出结果是什么?'global'?还是'local'?其实都不是,输出的是undefined,不用迷惑,我的题外话就是为了讲这个东西的。
其实很简单,看一看JavaScript运行机制就会明白。我们可以把这种现象看做"预声明"。但是如果稍微深究一下,会明白得更透彻。
这里其实涉及到对象属性绑定机制。因为所有JavaScript函数都是一个对象。在函数里声明的变量可以看做这个对象的"类似属性"。对象属性的绑定在语言里是有分"早绑定"和"晚绑定"之分的。
【早绑定】是指在实例化对象之前定义其属性和方法。解析程序时可以提前转换为机器代码。通常的强类型语言如C++,java等,都是早绑定机制的。而JavaScript不是强类型语言。它使用的是"晚绑定"机制。
【晚绑定】是指在程序运行前,无需检查对象类型,只要检查对象是否支持特性和方法即可。可以在绑定前对对象执行大量操作而不受任何惩罚。
上面代码出现的"预声明"现象,我们大可用"晚绑定"机制来解释。在函数的作用域中,所有变量都是"晚绑定"的。 即声明是顶级的。所以上面的代码和下面的一致:
在alert(a)之前只对a作了声明而没有赋值。所以结果可想而知。
在JavaScript里,我所知道的几种定义类和对象的方式:
直接量方式
使用直接量构建对象是最基础的方式,但也有很多弊端。
3 |
Obj.showName = function () { |
我们构建了一个对象Obj,它有一个属性name,一个方法showName。但是如果我们要再构建一个类似的对象呢?难道还要再重复一遍?NO!,我们可以用一个返回特定类型对象的工厂函数来实现。就像工厂一样,流水线的输出我们要的特定类型结果。
工厂方式
01 |
function createObj(name) { |
02 |
var tempObj = new Object; |
04 |
tempObj.showName = function () { |
09 |
var obj1 = createObj( 'obj_one' ); |
10 |
var obj2 = createObj( 'obj_two' ); |
这种工厂函数很多人是不把他当做构建对象的一种形式的。一部分原因是语义:即它并不像使用了运算符new来构建的那么正规。还有一个更大的原因,是因为这个工厂每次产出一个对象都会创建一个新函数showName(),即每个对象拥有不同的版本,但实际上他们共享的是同一个函数。
有些人把showName在工厂函数外定义,然后通过属性指向该方法,可以避开这个问题:
01 |
function showName () { |
04 |
function createObj(name) { |
05 |
var tempObj = new Object; |
07 |
tempObj.showName = showName; |
10 |
var obj1 = createObj( 'obj_one' ); |
11 |
var obj2 = createObj( 'obj_two' ); |
可惜的是,这种方式让showName()这个函数看起来不像对象的一个方法。
构造函数方式
这种方式是为了解决上面工厂函数的第一个问题,即没有new运算符的问题。可是第二个问题它依然不能解决。我们来看看。
3 |
this .showName = function () { |
7 |
var obj1 = new Obj( 'obj_one' ); |
8 |
var obj2 = new Obj( 'obj_two' ); |
它的好处是不用在构造函数内新建一个对象了,因为new运算符执行的时候会自动创建一个对象,并且只有通过this才能访问这个对象。所以我们可以直接通过this来对这个对象进行赋值。而且不用再return,因为this指向默认为构造函数的返回值。同时,用了new关键字来创建我们想要的对象是不是感觉更"正式"了。可惜,它仍然不能解决会重复生成方法函数的问题,这个情况和工厂函数一样。
原型方式
这种方式对比以上方式,有个很大的优势,就是它解决了方法函数会被生成多次的问题。它利用了对象的prototype属性。我们依赖原型可以重写对象实例。
1 |
var Obj = function () {} |
2 |
Obj.prototype.name = 'me' ; |
3 |
Obj.prototype.showName = function () { |
我们依赖原型对构造函数进行重写,无论是属性还是方法都是通过原型引用的方式给新建的对象,因此都只会被创建一次。可惜的是,这种方式存在两个致命的问题:
- 没办法在构建对象的时候就写入想要的属性,因为原型在构造函数作用域外边,没办法通过传递参数的方式在对象创建的时候就写入属性值。只能在对象创建完毕后对值进行重写。
- 致命问题在于当属性指向对象时,这个对象会被多个实例所共享。考虑下面的代码:
01 |
var Obj = function () {} |
02 |
Obj.prototype.name = 'me' ; |
03 |
Obj.prototype.flag = new Array( 'A' , 'B' ); |
04 |
Obj.prototype.showName = function () { |
10 |
alert(obj1.flag); // A,B,C |
11 |
alert(obj2.flag); //A,B,C |
是的,当flag属性指向对象时,那么实例obj1和obj2都共享它,哪怕我们仅仅改变了obj1的flag属性,但是它的改变在实例obj2中任然可见。面对这个问题,让我们不得不想是否应该把【构造函数方式】和【原型方式】结合起来,让他们互补。。。
构造函数和原型混合方式
我们让属性用构造函数方式创建,方法用原型方式创建即可:
01 |
var Obj = function (name) { |
03 |
this .flag = new Array( 'A' , 'B' ); |
06 |
showName : function () { |
13 |
alert(obj1.flag); // A,B,C |
14 |
alert(obj2.flag); //A,B |
这种方式有效地结合了原型和构造函数的优势,是目前用的最多,也是副作用最少的方式。
不过,有些追求完美的家伙还不满足,因为在视觉上还没达到他们的要求,因为通过原型来创建方法的过程在视觉上还是会让人觉得它不太像实例的方法(尤其对于传统OOP语言的开发者来说。)所以,我们可以让原型活动起来,让他也加入到构造函数里面去,好让这个构造函数在视觉上更为统一。而这一系列的过程只需用一个判断即可完成。
01 |
var Obj = function (name) { |
03 |
this .flag = new Array( 'A' , 'B' ); |
04 |
if ( typeof Obj._init == 'undefined' ) { |
06 |
showName : function () { |
如上,用_init作为一个标志来判断是否已经给原型创建了方法。如果是那么就不再执行。这样其实在本质上是没有任何变化的,方法仍是通过原型创建,唯一的区别在于这个构造函数看起来"江山统一"了。
但是这种动态原型的方式是有问题的,《JavaScript高级程序设计》里并没有深究。创建第一个对象的时候会因为prototype在对象实例化之前没来的及建起来,是根本无法访问的。所以第一个对象是无法访问原型方法的。同时这种方式在子类继承中也会有问题。
- 我所了解的关于JavaScript定义类和对象的几种方式
原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...
- javascript定义类或对象的方式
本文介绍的几种定义类或对象的方式中,目前使用最广泛的是:混合的构造函数/原型方式.动态原型方式.不要单独使用经典的构造函数或原型方式. 工厂方式 构造器函数 原型方式 混合的构造函数/原型方式 动态原 ...
- Javascript定义类(class)的三种方法
将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...
- [转]Javascript定义类的三种方法
作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...
- JavaScript 实现命名空间(namespace)的最佳方案——兼容主流的定义类(class)的方法,兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 一.缘由 在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...
- JS创建类和对象(好多方法哟!)
http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 ...
- javascript 定义类(转载)
Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...
- javascript定义类和类的实现
首先说说类,在一个类里我们会有以下的几个特征: 1. 公有方法 2. 私有方法 3. 属性 4. 私有变量 5. 析构函数 我们直接看一个例子: /***定义类***/ var Class = fun ...
- Javascript创建类和对象
现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...
随机推荐
- Java抽象与接口的区别
Java抽象与接口的区别 答案方式一.简单来说,1.接口是公开的,里面不能有私有的方法或变量,是用于让别人使用的,而抽象类是可以有私有方法或私有变量的, 2.另外,实现接口的一定要实现接口里定义的所有 ...
- Python决定一个变量时局部的,还是全局的,是在编译期
Python中的变量名是在编译时就解析好的,换句话说,在编译时(也就是在交互控制台输入代码是或者import文件时),Python就已经决定一个变量应该是局部变量,还是全局变量.来看下面的例子: &g ...
- 个人在git配置SSH Key遇到的问题以及解决方案
第一次用git上传代码到github,在这过程中遇到很多问题,在输入git命令的时候都小心翼翼,因为一不小心感觉就会出错.. 英语不好..在敲入git命令过程中各种错误提示勉强翻译下才看得懂 最后输入 ...
- c++反射概念-简单介绍
C++ 反射机制的简单实现 C++并不支持反射机制,只能自己实现. 如果需要实现字字符串到函数到映射,一定要使用到函数指针. 简单实现反射机制,根据字符串来构造相应到类.主要有以下几点: (1) 可以 ...
- UVA725 Division (暴力求解法入门)
uva 725 Division Write a program that finds and displays all pairs of 5-digit numbers that between t ...
- C#,Winform 文件的导入导出 File
1.导入 导入对话框:OpenFileDialog private void sbtnsb_Click(object sender, EventArgs e) { try { OpenFileDial ...
- python 爬虫每天定时启动爬虫任务
# coding=utf-8 import datetime import time def doSth(): # 这里是执行爬虫的main程序 print '爬虫要开始运转了....' ...
- [OS] 操作系统常考知识点
转自:http://jennica.space/2017/03/21/os-principle/ 大纲如下: 1.操作系统概述2.操作系统运行环境3.进程线程模型4.处理器调度5.同步机制6.存储模型 ...
- JavaScript 语句标识符,变量周期,常见的HTML事件
语句 描述 break 用于跳出循环. catch 语句块,在 try 语句块执行出错时执行 catch 语句块. continue 跳过循环中的一个迭代. do ... while 执行一个语句块, ...
- 第72天:jQuery实现下拉菜单
jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...