Javascript设计思想!

# 从古代说起
要理解Javascript的设计思想,必须从它的诞生说起。

1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断。如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了。

![netscape](images/netscape.png)

因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。工程师_Brendan Eich_负责开发这种新语言。他觉得,没必要设计得很复杂,这种语言只要能够完成一些简单操作就够了,比如判断用户有没有填写表单。

![](images/Brendan_Eich.jpg)

1994年正是面向对象编程(object-oriented programming)最兴盛的时期,C++是当时最流行的语言,而Java语言的1.0版即将于第二年推出,Sun公司正在大肆造势。

Brendan Eich无疑受到了影响,Javascript里面所有的数据类型都是对象(object),这一点与Java非常相似。但是,他随即就遇到了一个难题,到底要不要设计"继承"机制呢?  
# Brendan Eich的选择
如果真的是一种简易的脚本语言,其实不需要有"继承"机制。但是,Javascript里面都是对象,必须有一种机制,将所有对象联系起来。所以,Brendan Eich最后还是设计了"继承"。

但是,他不打算引入"类"(class)的概念,因为一旦有了"类",Javascript就是一种完整的面向对象编程语言了,这好像有点太正式了,而且增加了初学者的入门难度。
他考虑到,C++和Java语言都使用new命令,生成实例。
C++的写法是:

ClassName *object = new ClassName(param);

Java的写法是:

Foo foo = new Foo();

因此,他就把new命令引入了Javascript,用来从原型对象生成一个实例对象。但是,Javascript没有"类",怎么来表示原型对象呢?
这时,他想到C++和Java使用new命令时,都会调用"类"的构造函数(constructor)。他就做了一个简化的设计,在Javascript语言中,new命令后面跟的不是类,而是构造函数。

举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。

function DOG(name){
        this.name = name;
    }

对这个构造函数使用new,就会生成一个狗对象的实例。

var dogA = new DOG(‘大毛‘);
    alert(dogA.name); // 大毛

注意构造函数中的this关键字,它就代表了新创建的实例对象。  
# new运算符的缺点
用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。
比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

function DOG(name){
        this.name = name;
        this.species = ‘犬科‘;
    }

然后,生成两个实例对象:

var dogA = new DOG(‘大毛‘);
    var dogB = new DOG(‘二毛‘);

这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。

dogA.species = ‘猫科‘;
    alert(dogB.species); // 显示"犬科",不受dogA的影响

每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。  
# prototype属性的引入
考虑到这一点,Brendan Eich决定为构造函数设置一个prototype属性。
这个属性包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。
实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。
还是以DOG构造函数为例,现在用prototype属性进行改写:

function DOG(name){
        this.name = name;
    }
    DOG.prototype = { species : ‘犬科‘ };
    
    var dogA = new DOG(‘大毛‘);
    var dogB = new DOG(‘二毛‘);
    
    alert(dogA.species); // 犬科
    alert(dogB.species); // 犬科

现在,species属性放在prototype对象里,是两个实例对象共享的。只要修改了prototype对象,就会同时影响到两个实例对象。

DOG.prototype.species = ‘猫科‘;
    alert(dogA.species); // 猫科
    alert(dogB.species); // 猫科

时间: 2024-12-25 08:47:40

Javascript设计思想!的相关文章

javascript 继承机制设计思想

作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(proto

Javascript继承机制的设计思想

转自:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain

React的设计思想——理解JSX和Component

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上.而来自Facebook的React框架正是完全面向此问题的一个解决方案.React带来了很多开创性的思路来构建前端界面,虽然选择React的最重要原因之一是性能,但是相关技术背后的设计思想更值得我们去思考. React项目经理Tom Occhino曾经阐述React诞生的初衷,他提到React最大的价值究竟是什么?是高性能虚拟DOM.服务器端Render.

jQuery设计思想

前面的话 在深入了解jQuery的各个细节之前,需要对jQuery的设计思想有一个大致的了解.在遇到问题时, 知道应该使用jQuery的哪一个功能,然后迅速从手册中找到具体的用法.本文将详细介绍jQuery的设计思想 选择元素 jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作".这是它区别于其他javascript库的根本特点 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素 [模拟CS

Web设计思想——渐进增强

最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览网页的时候会碰到哪些问题? 3. 用什么方法来解决这些问题? 4. 这些方法具体的实施步骤有哪些? 一.契机 1)内容 内容是Web页面的核心,也是用户浏览页面的目的.内容可以是某些信息或某个功能,用户浏览网页就是为了获得它们.接下来所做的一切都是为了让内容脱颖而出,向用户传达更清晰明确的意义,传递更准确.更

React框架为什么这么火:React的设计思想

原文链接:http://mp.weixin.qq.com/s?__biz=MzA5Njc3Njk5NA==&mid=2650528748&idx=1&sn=4d3093e963ce76c642eb0c5d9a97625b#rd React的起源 React来自于Facebook,是的,就是那个你们听说过但是打不开的网站.Facebook的开发者当时在开发一个广告系统,因为对当前所有的MVC框架不满意,所以就自己写了一个UI框架,于是就有了React.后来因为觉得实在是好用,所以在2

Java的最大优势是保守的设计思想

一位Java大牛和一位普通Java程序员之间的区别是什么? 我认为可以把程序员的层次看作一个金字塔,其中可以大致分成3个层次.在最底层的是很勤劳的程序员,但是他们可能对编程本身兴趣不大,他们也能做好工作,但是他们下班之后就不会再想关于编程的事.这是很正常的现象,软件业需要很多程序员,并且这个需求仍然在不断增长.中间层次上的程序员,想再多做一些,他们阅读科技新闻和网站上的消息,他们会跟进下一个版本的进展,他们关心自己的技能,这个层次的程序员很有趣.而最上层的程序员则是时刻对技艺以及技术的本质着迷.

python 面向对象设计思想发展史

这篇主要说的是程序设计思想发展历史,分为概述和详细发展历史 一,概述 1940年以前:面向机器 最早的程序设计都是采用机器语言来编写的,直接使用二进制码来表示机器能够识别和执行的 指令和数 据.简单来说,就是直接编写 0 和 1 的序列来代表程序语言.例如:使用 0000 代表 加载(LOAD),0001 代表 存储(STORE)等. 机器语言由机器直接执行,速度快,但一个很明显的缺点就是:写起来实在是太困难了,一旦你 发现自己 写错了,改起来更蛋疼!这样直接导致程序编写效率十分低下,编写程序花

从 setState promise 化的探讨 体会 React 团队设计思想

从 setState 那个众所周知的小秘密说起... 在 React 组件中,调用 this.setState() 是最基本的场景.这个方法描述了 state 的变化.触发了组件 re-rendering.但是,也许看似平常的 this.setState() 里面却也许蕴含了很多鲜为人知的设计和讨论. 相信很多开发者已经意识到,setState 方法"或许"是异步的.也许你觉得,看上去更新 state 是如此轻而易举的操作,这并没有什么可异步处理的.但是要意识到,因为 state 的更