举例说明JavaScript中的实例对象与原型对象

这篇文章主要介绍了JavaScript中的实例对象与原型对象,针对constructor属性和prototype属性展开来讲,需要的朋友可以参考下

首先声明：javascript中每个对象都有一个constructor属性和一个prototype属性。constructor指向对象的构造函数，prototype指向使用构造函数创建的对象实例的原型对象。

function Person(){ 

 } 

var person = new Person(); 

Person.prototype = { 

 constructor : Person, 

 name : 'zxs', 

 age : 24, 

 sayName : function(){alert(https://www.sodocs.net/doc/609449684.html,)} 

 } 

person.sayName(); 

在这段代码中会报错，sayName() is not defined。根据javascript高级程序设计第二版的解释，是因为重写的原型切断了构造函数与最初原型之间的联系。但是我们调整一下上面语句的顺序。如下：

function Person(){ 

 } 

//var person = new Person(); 

Person.prototype = { 

 constructor : Person, 

 name : 'zxs', 

 age : 24, 

 sayName : function(){alert(https://www.sodocs.net/doc/609449684.html,)} 

} 

/*===========================================================*/

var person = new Person(); 

/*===========================================================*/

 person.sayName(); // zxs 

alert(person.constructor) //function Object() { [native code]} or function Person() {} 取决与蓝色的语句是否有效 

注意上面两段代码等号中间的语句。按第二段的顺序写代码，将会输出”zxs“，这个结果说明在第一种情况下报错并不能说明是因为切断了构造函数与原想之间的联系引起的。

Person.prototype = ｛｝ 

本来就是一种定义对象的方法，而且在javascript中每个对象的constructor属性都默认的指向Object构造函数，这也就不难说明重写原型对象确实切断了构造函数与最初原型之间的联系，但并不能说明这种联系被切断之后person就不能访问到sayName()函数。

现在有这样的假设：函数的prototype属性所指向的原型对象，与我们显示新建的原型对象并不是完全等同的。当我们调用函数的时候会创建一个原型对象，此时会首先查找当前环境中是否存在其原型对象，如果程序中不存在，就创建一个，如果环境中存在，侧查找他们的属性和方法，最后根据查找的结果返回一个原型对象，这个对象中的属性和方法总是优

先使用默认原型中的属性和方法，也就是构造函数中定义的属性和方法。当当调用的方法或属性不存在于默认的原型中时，才使用定义在Person.prototype = {} 的属性和方法。

javascript是解释性的语言，语句都是顺序执行的，在第一段代码中，当我们使用new 关键字创建新对象的时候，Person.prototype = {} 并没有执行，也就是说在当前的执行环境中找不到其中定义的方法和属性，而构造函数中没有该方法，所以出错。就像一个变量，给他赋值的时候程序没有执行将不能使用。在第二段中环境中已经存在该调用的方法，构造函数的原型对象已经创建完毕，所以可以得到结果。

再看下面的一段程序：

////////////////////////////////////////////////////////////////////////// 

function Person(){} 

/*===========================================================*/

 var person = new Person(); 

https://www.sodocs.net/doc/609449684.html, = 'song'; 

/*===========================================================*/

//Person.prototype.sayName = function(){alert(https://www.sodocs.net/doc/609449684.html,)}; 

Person.prototype = { 

constructor : Person, 

name : 'zxs', 

age : 24, 

sayName : function(){alert(https://www.sodocs.net/doc/609449684.html,)} 

} 

person.sayName(); // error 

////////////////////////////////////////////////////////////////////////// 

function Person(){  } 

/*var person = new Person();*/

https://www.sodocs.net/doc/609449684.html, = 'song';  

/*Person.prototype.sayName = function(){alert(https://www.sodocs.net/doc/609449684.html,)};*/

Person.prototype = {   

constructor : Person, 

  name : 'zxs', 

  age : 24, 

  sayName : function(){alert(https://www.sodocs.net/doc/609449684.html,)} 

} 

/*===========================================================*/

var person = new Person(); 

/*===========================================================*/

person.sayName(); // zxs 

从这里可以看出使用https://www.sodocs.net/doc/609449684.html, = '',的方式不论在什么地方创建对象都能被访问，如果同时存在对象字面量和这种方法定义原型对象，将使用后定义的作为最终值。并且对原型对象使用对象字面量定义之后，该定义必须出现在创建对象的语句之前才能被访问到。

实例不能访问到原型对象中的属性和方法，不仅仅是因为重写原型对象切断了构造函数与最初原型之间的联系。

function Person(){  

  }  

var person = new Person();  

Person.prototype = {  

  //constructor : Person,  

  name : 'zxs',  

  age : 24,  

  sayName : function(){alert(https://www.sodocs.net/doc/609449684.html,)}  

  }  

person.sayName();  

以上代码在实例化对象时构造函数的原型为空，它没有任何除默认属性以外的属性。重写构造函数的原型确实切断了构造函数与最初原型之间的联系。

在使用new 操作符以后构造函数的原型对象中的属性和方法已经添加到person对象中。因为以上方法为函数原型添加新属性和方法不具有动态性，所以person不能访问到新添加的属性和方法。

重写原型对象之后，就如同如下代码：

var o = { 

  name : 'zxs'

  } 

var obj = o; 

o = {} 

console.log(https://www.sodocs.net/doc/609449684.html,);  

此时输出的值是undefined，因为，对象是一个引用类型，“=”是赋值操作符，并且其运算顺序是从右往左。o={}就是说o的指向已经改变，是一个空对象。

Person.prototype.mothed = function() {}与Person.prototype={mothed:function(){}}的区别就如同arr = []和arr.push()一样，前者都是修改自身，后者是完全改变自身。

Javascript综合应用小案例

按需求弄了一个取词以及标红的小应用。 先上demo ：/ 很多平时常用的东西，都用上了，所以拿出来说说。 一、代码 View Code 以上是所有js代码，比较长，下面将列举一些比较突出的点（望高人多多指点）。 二、代码分析 1.获取文本 getSelectionText: function(){ if(window.getSelection) { return window.getSelection().toString(); } else if(document.selection && { return; } return ''; } 这个在以前（JavaScript操控光标，你会么？）的文章里也说过，就不赘述了。 2.创建控制框 createBtn: function(evt){ var button = document.createElement("div"), //...csses= { "height" : "30px", "line-height" : "30px", "position": "absolute", "top": y + 10 + "px", "left": x + 10 + "px", "cursor": "pointer", "border": "1px solid #000", "background": "#EEE", "padding": "2px 8px", "border-radius": "3px" }; for(i in csses){

if(csses.hasOwnProperty(i)){ cssList += i + ":" + csses[i] + ";"; } } =cssList; button.innerHTML = "添加到关键词列表"; button.setAttribute("id", "btn"); //...} 这里有一点我想说说，在写js的时候，会经常涉及到对DOM对象style的处理，如果不想额外加入一个plugins.css之类的文件，可以像上面一样，将样式放置在一个对象中，然后利用for in将其写入，本来开始我用的是 obj.style[i] = csses[i]; 不知道为什么，在IE下报错了，后来便用cssText代替。 效果： 3.标红 //关键词标红 setRed: function(str){ var content = this._("article"), temp = '(' + str + ')'; reg = new RegExp(temp,'g'); content.innerHTML = , "$1"); } 这里主要就是正则表达式的事情了，正则的话，推荐两篇文章 ?一篇是司徒正美的，讲的比较全面，比较系统。点我链接过去→ ?一篇是30分钟搞定正则，这个讲说是对所有语言，JS的话正则这一块还不是特别完善和强大。点我链接过去→ 哈哈，相信用过正则的人不需要我来解释这个$1了吧，他的意思就是匹配到的第一个。 当然，删除标红和这个原理是差不多的。 //删除标红 rmRed: function(str){ var content = this._("article"), temp = "()"; reg = new RegExp(temp,'g i'); content.innerHTML = , str); }

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式

JavaScript面向对象简介

JavaScript面向对象简介 JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的OOP 语言能力。本文从对面向对象编程的介绍开始，带您探索JavaScript 的对象模型，最后描述 JavaScript 当中面向对象编程的一些概念。 复习JavaScript 如果您对JavaScript 的概念（如变量、类型、方法和作用域等）缺乏自信，您可以在重新介绍JavaScript这篇文章里学习这些概念。您也可以查阅这篇JavaScript 1.5 核心指南。 面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby 和Objective-C）都支持面向对象编程（OOP）。 面向对象编程可以看作是使用一系列对象相互协作的软件设计，相对于传统观念，一个程序只是一些函数的集合，或简单的计算机指令列表。在OOP中，每个对象能够接收邮件，处理数据和发送消息给其他对象。每个对象都可以被看作是一个独立的小机器有不同的作用和责任。 面向对象程序设计的目的是促进更好的编程灵活性和可维护性，并在大型软件工程中广为流行。凭借其十分注重的模块化，面向对象的代码开发更简单，往后维护更容易理解，使其自身能更直接的分析，编码，理解复杂的情况和过程，比非模块化编程方法省事。1

术语 Namespace 命名空间 允许开发人员在一个专用的名称下捆绑所有功能代码的容器。 Class 类 定义对象的特征。 Object 对象 类的一个实例。 Property 属性 对象的特征，比如颜色。 Method 方法 对象的能力，比如行走。 Constructor 构造函数 实例化时调用的函数。 Inheritance 继承 一个类可以继承另一个类的特征。 Encapsulation 封装 类定义了对象的特征，方法只定义了方法如何执行。 Abstraction 抽象 结合复杂的继承，方法，属性，一个对象能够模拟现实的模型。 Polymorphism 多态 多意为‘许多’，态意为‘形态’。不同类可以定义相同的方法或属性。更多关于面向对象编程的描述，请参照维基百科的面向对象编程。 原型编程

JavaScript复习题

复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为： A．x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()

基于对象的JavaScript语言

基于对象的JavaScript语言 一、对象的基本结构 JavaScript中的对象是由属性(properties)和方法(methods)两个基本的元素的构成的。属性是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；方法是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 二、引用对象的途径 一个对象要真正地被使用，可采用以下几种方式获得： 1、引用JavaScript内部对象；this window 2、由浏览器环境中提供；https://www.sodocs.net/doc/609449684.html, 3、创建新对象。new 这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。 三、有关对象操作语句 1、For...in语句 格式如下：For（对象属性名in 已知对象名） 说明：该功能是用于对已知对象的所有属性进行操作的循环控制。它是将一个已知对象的所有属性反复置给一个变量；而不是使用计数器来实现的。它的优点是无需知道对象中属性的个数即可进行操作。 2、with语句 使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。with object{ ...} 所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。 3、this关键字 this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己已不知道现在引用的那一个对象，为此JavaScript提供了一个用于将对象指定当前对象的语句this。 4、New运算符可以创建一个新的对象 格式：

Javascript鼠标触发事件大全

Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发

《HTML+CSS+JavaScript网页制作案例教程》课程教学

传智播客 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称：HTML+CSS+JavaScript网页制作案例教程 授课年级：2015年级 授课学期：2015学年第二学期 教师姓名：某某老师

201 年月日 课题名称第5章列表与超链接 计划 课时 6课时 内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； ●掌握超链接标记的使用，能够使用超链接定义网页元素； ●掌握CSS伪类，会使用CSS伪类实现超链接特效； 重点及措施 教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：有序列表、定义列表、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。 教学过程 第一课时 （制作“精美电商悬浮框”，讲解无序列表、有序列表） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。 1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px， 同时盒子有3px的边框，请问这个盒子的总宽度是多少？（） A、333px B、366px C、336px D、363px

JavaScript面向对象编程(最终版)

JavaScript面向对象编程 1、引言 JavaScript是一种解释性的，基于对象的脚本语言（an interpreted, object-based scripting language）。JavaScript 基于客户端运行，目前基本上所有的浏览器都支持JavaScript。1995年首次出现时，JavaScript的主要目的还只是处理一些输入的有效性验证，随着互联网的蓬勃发展，JavaScript的应用越来越广泛，特别是近几年AJAX技术（Asynchronous JavaScript and XML）的发展，更使JavaScript的应用达到了一个新的高度。在AJAX技术中，JavaScript是一项关键技术，请求的发送、接收、接收数据后的界面处理都需要使用JavaScript技术，这对JavaScript语言提出了新的需求，本文从JavaScript的基本特点出发，模拟出了面向对象编程的大部分特点，使JavaScript摆脱了以往脚本语言杂乱无章、难以阅读、难以维护的形象，而具有了面向对象特性，极大的方便了JavaScript的开发、维护，提高了软件开发效率。 2、JavaScript的基本特点 JavaScript是解释性的，基于对象的脚本语言。它有下面几个显著特点，这几个特点在后面的面向对象特性模拟中会反复用到，因此这里先详细说明这几个特点。 解释型语言：JavaScript是一种解释性语言，解释性语言相对于编译型语言，编译型语言必须先通过编译才能执行，而解释性语言不需要编 译，直接从上到下解释执行，一边解释一边执行，这就决定了解释性语 言的代码是有先后顺序的，需要执行的代码必须已经解释过。因此， JavaScript需要注意代码的先后顺序。

JavaScript图形实例：蝴蝶结图案

JavaScript图形实例：蝴蝶结图案 1．长短瓣相间的蝴蝶结 设定曲线的坐标方程为： b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ)); x1=b*cos(θ); x2=b*cos(θ+π/8); y1=b*Math.sin(θ); y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5） 在0~2π区间中从θ=0开始，每隔π/360按曲线方程求得两个点的坐标值(x1,y1)和(x2,y2)，并将求得的两点连成一条线段，这样，可以得到一个长短瓣相间的蝴蝶结图案。 编写如下的HTML代码。 eval( )内置函数的用法：计算字符串表达式的值。

javascript试题

在HTML中，表单中的input元素的（）属性用于指定表单元素的名称。 A. value B. name C. type D. caption 当表单各项填写完毕，鼠标单击提交按钮时可以触发（）事件。 A. onenter B. onsubmit C. onmouseDrag D. onmouseOver 分析下面的JavaScript代码段，输出结果是（）。 var a=15.59; document.write(Math.round(a)); A. 15 B. 16 C. 15.5 D. 15.4 要求用JavaScript实现下面的功能：在一个文本框中内容发生改变后，单击页面的其他部分将弹出一个消息框显示文本框中的内容。下面语句正确的是（）。 A. B. C. D. 假定今天是2006年4月1日星期六，请问下列JavaScript代码在页面上的输出结果是（）。var time=new Date(); document.write(time.getDate()); A. 2006 B. 4 C. 1 D. 6 下面描述正确的是（）。 A. switch语句用于重复执行一个语句块的操作 B. switch语句根据表达式的值执行若干语句块之一，如果没有匹配项，则执行默认语句块中的语句 C. switch语句表达式中的值不能与后面case语句中的常量相匹配时将出现运行错误 D. switch语句又叫循环语句 分析如下JavaScript代码，b的值为（）。 var a=1.5 ,b; b=parseInt(a); A. 2 B. 0.5 C. 1 D. 1.5 在HTML中，使用JavaScript中的浏览器对象实现在当前窗口打开链接"https://www.sodocs.net/doc/609449684.html,"的javascript语句是（）。 A. window.open("https://www.sodocs.net/doc/609449684.html,"); B. document.write("https://www.sodocs.net/doc/609449684.html,"); C. location.replace("https://www.sodocs.net/doc/609449684.html,"); D. location.reload("https://www.sodocs.net/doc/609449684.html,"); 如果今天是2006年5月14日，分析下列JavaScript代码运行后，在网页上显示（）。 var now = new Date(); var year = now.getYear(); var month = now.getMonth(); var date = now.getDate(); document.write(year+" "+month+" "+date); A. 2006 05 14 B. 2006 5 14 C. 2006 04 14 D. 2006 4 14 在HTML中有如下代码，运行后页面显示结果为（）。