前端小知识点(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,一经查实,立即删除!

相关文章

Windows 文件同步方案讨论

在日常运维工作中,经常会遇到这样的情况:我们需要在无人值守的情况下完成文件、文件夹的同步过程,已实现周期性的备份,避免单点故障。本研究实现了本地Windows主机与远程Windows主机,本地Windows主机与远程Linux主机目…

vs2008打开vs2010工程项目

From: http://blog.csdn.net/sonicrang/article/details/7387676 http://blog.csdn.net/godson_h/article/details/6575874 由于软件的向下兼容,vs2010可以打开vs2008项目,但是vs2008打开vs2010时会出现一些错误提示。解决办法如下:1. 替换…

递归求和的复习-计算m~n整数和

题目&#xff1a;实现一个计算m~n&#xff08;m<n&#xff09;之间所有整数的和的简单函数。 说明&#xff1a;接口函数int sum(int m, int n); 输入已经保证m < n. 采用递归算法来实现&#xff0c;其他类似&#xff0c;复习一下递归算法&#xff1a;1、退出条件 2、递…

c#语言float转换int,C#Float表达式:将结果float转换为int时的奇怪行为

我有以下简单代码&#xff1a;int speed1 (int)(6.2f * 10);float tmp 6.2f * 10;int speed2 (int)tmp;speed1并且speed2应该具有相同的值&#xff0c;但实际上&#xff0c;我有&#xff1a;speed1 61speed2 62我知道我可能应该使用Math.Round而不是强制转换&#xff0c;但…

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

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

【DICOMDIR专题】DICOMDIR基础知识及常见问题汇总

很多网友希望论坛能够出一些更专业、更细分的小专题&#xff0c;DICOMDIR就是目前需求量较大的专题之一。所以&#xff0c;结合网友所需&#xff0c;与几个关心此内容的朋友一起努力&#xff0c;做了一个小专题&#xff0c;希望对你有一些帮助&#xff5e;&#xff5e;DICOMDIR…

struct sockaddr_nl 结构体 由来、含义以及使用——获取Linux路由表

From: http://yangelc.blog.sohu.com/68245920.html Linux 用户态与内核态的交互 在 Linux 2.4 版以后版本的内核中&#xff0c;几乎全部的中断过程与用户态进程的通信都是使用 netlink 套接字实现的&#xff0c;例如iprote2网络管理工具&#xff0c;它与内核的交互就全部使用了…

Ubuntu 14.10 下运行进程实时监控pidstat命令详解

简介 pidstat主要用于监控全部或指定进程占用系统资源的情况&#xff0c;如CPU&#xff0c;内存、设备IO、任务切换、线程等。pidstat首次运行时显示自系统启动开始的各项统计信息&#xff0c;之后运行pidstat将显示自上次运行该命令以后的统计信息。用户可以通过指定统计的次数…

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

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

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

大家好&#xff0c;我使用scala实现了个简单的解释器&#xff0c;能够实现整数的加减乘除。我是照着快学 19章的 3 - 4 * 5 这个例子做的。思路也是按照它的来的。大概是这样 1)首先定义 factor是整数2)那么 term &#xff1a; ( 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 加载原理分析&#xff0d;&#xff0d;&#xff0d;&#xff0d;分析的比较透彻&#xff0c;我在wifimod…

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

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

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

PS/2键盘鼠标接口各针脚定义(附图)好像很长时间也没有把这个最不被人重视的硬件问题提出来了&#xff0c;今天&#xff01;我们就来谈谈键盘、鼠标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:~…

JVectorMap 实现中国地图

我借鉴的博客&#xff1a;http://dove19900520.iteye.com/blog/1880668 一、功能介绍  JVectorMap是一款jquery的地图插件&#xff0c;可以支持各个国家和具体到省份的地图。 二、下载地址 http://download.csdn.net/download/laoshanbizu/5488955 三、使用步骤 1、引用 <…

React开发(226):默认方法返回一个新的参数两个括号

<Form className{form-customer}><Form.Item style{{ width: 100% }}>{getFieldDecorator(needDeliverBackcode${row.code}, {})(<Checkbox onChange{(data) > this.handleCheck (data, row)}>是否回寄</Checkbox>)}</Form.Item></Form&g…

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

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

linux下 USB动态监测 hotplug事件监测

From: http://blog.csdn.net/qwyang/article/details/6425555 总体规划&#xff1a; 使用netlink接口向内核注册hotplug事件通知&#xff0c;获取事件通知后进行相关动作如&#xff08;Actionadd&#xff09;挂载或&#xff08;actionremove&#xff09;卸载&#xff0c;使用So…

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

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