前端小知识点(8):作者为什么设计原型

目录

一、从古代说起

二、Brendan Eich的选择

三、new运算符的缺点

四、prototype属性的引入

五、总结

六代码部分


一、从古代说起

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

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

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

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); // 猫科

五、总结

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

六代码部分

function Fun(){// this.run = function(){}}Fun.prototype.run = function(){}var obj1 = new Fun();
var obj2 = new Fun();console.log( obj1.run == obj2.run   )

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/405622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端小知识点(9):函数和对象之间的关系

目录 函数与对象之间的关系 代码演示 运行结果 函数与对象之间的关系 函数 有什么 : 函数也是对象 函数有:prototype 对象 有什么 对象:__proto__ 原型对象里面有什么:constructor 代码演示 //fun是一个函数&#xf…

Linux 给Qt应用软件创建图标启动

一、描述 Ubuntu源码编译安装Eclipse和Qt后,没有自动创建图标,每次启动需要进入到目录下运行脚本,比较麻烦。 可通过创建类似于windows系统的快捷方式进行快捷启动。 快捷方式一般以.desktop后缀命名,并保存到/usr/share/appli…

scheme解释器 C语言实现,使用Scala写了个简单的Scheme解释器

大家好,我使用scala实现了个简单的解释器,能够实现整数的加减乘除。我是照着快学 19章的 3 - 4 * 5 这个例子做的。思路也是按照它的来的。大概是这样 1)首先定义 factor是整数2)那么 term : ( factorfactor...) 就是一个完整的表达式了3) …

Android 的用户层 uevent处理机制

From: http://blog.csdn.net/linphusen/article/details/5667647 摘录几篇android研发日志 1 http://blog.csdn.net/linweig/archive/2010/06/01/5640697.aspx Firmware 加载原理分析----分析的比较透彻,我在wifimod…

前端小知识点(10):原型链

目录 原型链 : 代码1 运行结果1 代码二 运行结果2 原型链 : 每一个对象都有一个原型(__proto__),这个原型还可以拥有自己的原型,形成最终的原型链。 查找一个对象特定的属性或者方法,我们先去当前对象中找&#xff…

PS/2键盘鼠标接口各针脚定义

PS/2键盘鼠标接口各针脚定义(附图)好像很长时间也没有把这个最不被人重视的硬件问题提出来了,今天!我们就来谈谈键盘、鼠标PS/2接头各针脚定义(图)。针脚序号颜色名称简称意义电平1绿(G)Keyboard DATADATA (D)数据负线高电平2ReservervedN/C未定义预留空…

用css写个三角形

样例&#xff1a; 代码&#xff1a; html: <div class"tips"> <span class"caret"></span> 我是一个tooltip </div>css: .tips {width: 200px;height: 50px;line-height: 50px;text-align: center;position: relative;margin: 20p…

Linux系统查看版本和位数

一、查看系统版本 lsb_release -a piraspberrypi:~ $ lsb_release -a No LSB modules are available. Distributor ID: Raspbian Description: Raspbian GNU/Linux 8.0 (jessie) Release: 8.0 Codename: jessie 二、查看系统所有信息 uname -a piraspberrypi:~…

Linux 环境变量PATH设置和查看etc/profile和bashrc的区别

一、查看环境变量 echo $PATH echo有“显示、印出”的意思&#xff0c;而 PATH 前面加的 $ 表示后面接的是变量&#xff0c;所以会显示出目前的 PATH. PATH&#xff08;一定是大写&#xff09;这个变量的内容是由一堆目录所组成的&#xff0c;每个目录中间用冒号&#xff08;:&…

android选择头像弹窗,Android App开发常用功能之用户头像选择-Go语言中文社区

前言现在的APP基本都有个人资料的填写&#xff0c;基本的都有头像的选择&#xff0c;支持拍照和从本地相册选择&#xff0c;剪切圆形头像的功能&#xff0c;现在用个小demo实现以下。下面看一下效果图上代码&#xff1a;主界面代码package com.example.androidpersonal_icon;im…

java jdk1.8.0_221 安装步骤

一、下载jdk Oracle JDK下载 官网 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载jdk1.8.0_221. 需要注册账号登陆才能下载。 下载完成&#xff0c;双击jdk-8u221-windows-x64.exe&#xff0c;进行安装。 二、安装jdk 安装前…

gsoap使用心得!

From: http://www.cppblog.com/qiujian5628/archive/2008/06/19/54019.html 完整源码下载 最近换了个工作环境&#xff0c;现在在大望路这边上班&#xff0c;呵&#xff0c;刚上班接到的任务就是熟悉gsoap&#xff01;废话少说&#xff0c;现在开始gSoap学习&#xff01;gSOAP…

eclipse启动报错No java virtual machine was found after seearching the locations:XXXXX

一、问题描述 卸载之前的老版本JDK后&#xff0c;重新安装了JDK&#xff0c;再次打开eclipse出现以下问题&#xff1a;在指定的目录中找不到JDK虚拟机。 二、解决办法 eclipse启动时会根据eclipse.ini配置文件来找javaw.exe 启动ecplise GUI。 在eclipse安装的根目录中找到e…

Linux 查看磁盘分区、文件系统、使用情况的命令和相关工具介绍

From: http://fedora.linuxsir.org/main/?qnode/41 作者&#xff1a;北南南北 来自&#xff1a;LinuxSir.Org 提要&#xff1a;Linux 磁盘分区表、文件系统的查看、统计的工具很多&#xff0c;有些工具是多功能的&#xff0c;不仅仅是查看磁盘的分区表&#xff0c;而且也能进行…

Android 机顶盒手势、数据分页演示DEMO

上篇讲了一篇机顶盒的一个封装类《GridView》&#xff0c;利用这个封装的GridView 可以实现一些例如移动、位移图标等基础组件“GridView”无法实现的一些功能。本篇将会提出一部分可供运行的代码演示一个分页、手势换屏的DEMO版本&#xff0c;供大家学习。 DEMO 的工程目录如下…

Java jdk中的部分工具javac javaw javaws javadoc javah javap jar jdb jps的作用

一、JDK 工具和实用程序 JDK提供的标准工具和程序 基本工具&#xff1a;javac, java, javadoc, apt, appletviewer, jar, jdb, javah, javap, extcheck安全工具&#xff1a;keytool, jarsigner, policytool, kinit, klist, ktab国际化工具&#xff1a;native2ascii远程方法调…

firefox android 去更新,Android版Firefox Beta发布更新

就在谷歌I/O大会前夕&#xff0c;Android版Firefox Beta悄悄的发布了一次更新。更新内容包括&#xff1a;Flash支持(虽然事实上在上个月的更新中就已经支持了)以及日常bug修复及稳定性提升等&#xff0c;不过依然没有加入复制和粘贴功能。此外Firefox Beta的UI界面也被重新设计…

android studio 安装问题,解决Android Studio的安装问题

今天开始了android studio的下载与安装&#xff0c;我再官网上下载了Android studio,下载不难&#xff0c;运行出来可需要一定的时间&#xff0c;在中途中我遇到了一些问题一&#xff1a;Build错误&#xff1a;在我最开始下载完Android studio时&#xff0c;我新建项目的时候&a…