`
yyangbb
  • 浏览: 36550 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript技术基础1(转载)

阅读更多

javascript面向对象技术基础(一)

看了很多介绍javascript面向对象技术的文章,很晕.为什么?不是因为写得不好,而是因为太深奥.
javascript中的对象还没解释清楚怎么回事,一上来就直奔主题,类/继承/原型/私有变量....
结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂...
这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也
会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考.
如果不做说明,则文中出现的所有英文语句(程序体除外)都是引自<<javascript-the definitive guide,5th edition>>.


-------------------------------------------------
对象和数组(Objects and Arrays)
什么是对象?把一些"名字-属性"的组合放在一个单元里面,就组成了一个对象.我们可以理解为javascript中
的对象就是一些"键-值"对的集合(An object is a collection of named values. These named values are usually referred
to as properties of the object.--Section3.5).
"名字"只能是string类型,不能是其他类型,而属性的类型则是
任意的(数字/字符串/其他对象..).可以用new Object()来创建一个空对象,也可以简单的用"{}"来创建一个
空对象,这两者的作用是等同的.

Js代码
  1. var  emptyObject1 = {};            //创建空对象   
  2. var  emptyObject2 =  new  Object();  //创建空对象   
  3. var  person = { "name" : "sdcyst" ,  
  4.           "age" :18,  
  5.           "sex" : "male" };      //创建一个包含初始值的对象person   
  6. alert(person.name);              //sdcyst   
  7. alert(person["age" ]);             //18   
var emptyObject1 = {};	         //创建空对象
var emptyObject2 = new Object(); //创建空对象
var person = {"name":"sdcyst",
	      "age":18,
	      "sex":"male"};     //创建一个包含初始值的对象person
alert(person.name);              //sdcyst
alert(person["age"]);            //18



 从上面的例子我们也可以看到,访问一个对象的属性,可以简单的用对象名加"."后加属性的名字,也
可以用"[]"操作符来获取,此时在[]里面的属性名字要加引号,这是因为对象中的索引都是字符串类型的.
javasript对象中属性的个数是可变的,在创建了一个对象之后可以随时对它赋予任何的属性.

Js代码
  1. var  person = {};  
  2. person.name = "sdcyst" ;  
  3. person["age" ] = 18;  
  4. alert(person.name + "__"  + person.age);  //sdcyst__18   
  5.   
  6. var  _person = {name: "balala" , "age" :23};  //在构建一个对象时,属性的名字可以不用引号来标注(name),   
  7.                     //但是仍旧是一个字符串类型.在访问的时候[]内仍旧需要引号   
  8. alert(_person["name" ] +  "__"  + person.age);  //balala__23   
  9. alert(_person[name]);                   //undefinied   
var person = {};
person.name = "sdcyst";
person["age"] = 18;
alert(person.name + "__" + person.age); //sdcyst__18

var _person = {name:"balala","age":23}; //在构建一个对象时,属性的名字可以不用引号来标注(name),
					//但是仍旧是一个字符串类型.在访问的时候[]内仍旧需要引号
alert(_person["name"] + "__" + person.age); //balala__23
alert(_person[name]);                   //undefinied



 通过"."操作符获取对象的属性,必须得知道属性的名字.一般来说"[]"操作符获取对象属性的功能更强大一些,
可以在[]中放入一些表达式来取属性的值,
比如可以用在循环控制语句中,而"."操作符则没有这种灵活性。

Js代码
  1. var  name = { "name1" : "NAME1" , "name2" : "NAME2" , "name3" : "NAME3" , "name4" : "NAME4" };  
  2. var  namestring =  "" ;  
  3. for ( var  props  in  name) {   //循环name对象中的属性名字   
  4.     namestring += name[props];  
  5. }  
  6. alert(namestring);  //NAME1NAME2NAME3NAME4   
  7.   
  8. namestring = "" ;  
  9. for ( var  i=0; i<4; i++) {  
  10.     namestring += name["name" +(i+1)];  
  11. }  
  12. alert(namestring);  //NAME1NAME2NAME3NAME4   
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring += name[props];
}
alert(namestring);  //NAME1NAME2NAME3NAME4

namestring = "";
for(var i=0; i<4; i++) {
    namestring += name["name"+(i+1)];
}
alert(namestring);  //NAME1NAME2NAME3NAME4



 delete操作符可以删除对象中的某个属性,判断某个属性是否存在可以使用"in"操作符.

Js代码
  1. var  name = { "name1" : "NAME1" , "name2" : "NAME2" , "name3" : "NAME3" , "name4" : "NAME4" };  
  2. var  namestring =  "" ;  
  3. for ( var  props  in  name) {   //循环name对象中的属性名字   
  4.     namestring += name[props];  
  5. }  
  6. alert(namestring);  //NAME1NAME2NAME3NAME4   
  7.   
  8. delete  name.name1;   //删除name1属性   
  9. delete  name[ "name3" ];   //删除name3属性   
  10. namestring = "" ;  
  11. for ( var  props  in  name) {   //循环name对象中的属性名字   
  12.     namestring += name[props];  
  13. }  
  14. alert(namestring);  //NAME2NAME4   
  15.   
  16. alert("name1"   in  name);  //false   
  17. alert("name4"   in  name);  //true   
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring += name[props];
}
alert(namestring);  //NAME1NAME2NAME3NAME4

delete name.name1;  //删除name1属性
delete name["name3"];  //删除name3属性
namestring = "";
for(var props in name) {  //循环name对象中的属性名字
    namestring += name[props];
}
alert(namestring);  //NAME2NAME4

alert("name1" in name); //false
alert("name4" in name); //true



 需要注意,对象中的属性是没有顺序的.

对象的constructor属性

每一个javascript对象都有一个constructor属性.这个属性对应了对象初始化时的构造函数(函数也是对象).

Js代码
  1. var  date =  new  Date();  
  2. alert(date.constructor);  //Date   
  3. alert(date.constructor == "Date" );   //false   
  4. alert(date.constructor == Date);  //true   
 
分享到:
评论

相关推荐

    【转载】javaScript常用的东东

    这些JavaScript常用方法构成了开发者日常编程的基础,熟练掌握它们能极大地提高编程效率和代码质量。在实际应用中,还可以结合其他技术如jQuery、React、Vue等库或框架,以及ES6+的新特性,进一步提升开发体验。不断...

    GT-Grid 1.0 基础教程(一)转载

    对于那些对Ajax技术下的列表组件不太熟悉的开发者来说,这份指南尤其有用。通过本教程的学习,你可以了解到如何构建一个简单的纯客户端只读列表,并了解如何通过设置不同的属性来满足个性化需求。 #### 二、环境...

    【RPA之家转载AA视频教程】40.RP.rar

    1. **JavaScript基础**:讲解JavaScript的基本语法和常见操作,为不熟悉JavaScript的观众提供基础知识。 2. **Automation Anywhere的JavaScript支持**:介绍AA如何支持JavaScript脚本的编写和执行,以及如何在工作...

    CSDN怎么转载别人的博客.docx

    HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。 HTML的特点: * 用于创建网页 * 是一种基础技术 * 与CSS、JavaScript一起使用 ...

    JSP简明教程:JSP基础(转载)

    虽然JSP默认使用Java作为脚本语言,但它也支持其他语言,就像ASP支持javascript和VBScript一样。 **JSP的优势和特性** 1. **易用性与灵活性**:JSP提供了丰富的服务器端标签库,使得即使是对Java不太熟悉的开发者...

    (转载)GWT -EXT学习笔记-基础

    ### GWT-EXT基础知识详解 #### 一、GWT与GWT-EXT简介 Google Web Toolkit (GWT) 是一款由Google开发的开源框架,它允许开发者使用Java语言编写前端...接下来,可以根据实际需求进一步探索更多高级特性和技术细节。

    layui-progress+element+jquery+js设计一个动态进度条

    本项目利用layui-progress、element、jQuery和JavaScript技术,巧妙地设计了一个动态进度条,旨在提供一个易于学习的示例。 layui-progress是layui框架中的一个组件,它提供了丰富的进度条样式和自定义选项。layui...

    my1(java基础+页面设计)

    Java基础涉及编写程序的基本技能,而页面设计则可能涵盖HTML、CSS和JavaScript,这些都是构建用户交互界面的关键技术。 【压缩包子文件的文件名称列表】: 1. "J2EE1.5英文.chm" - 这是一个关于J2EE 1.5版本的离线...

    华为面试试题,很经典,转载

    【标题】华为面试试题,很经典,转载 在IT行业中,华为作为全球领先的信息与通信技术(ICT)解决方案供应商,其面试题目往往被视为衡量技术能力的重要标准。这些经典的面试问题涵盖了多个领域,不仅测试候选人的专业...

    jsp页面内容滚动(转载)

    在给定的标题“jsp页面内容滚动(转载)”和描述中,我们可以推断出这个话题主要关注如何在JSP(Java Server Pages)页面上创建动态滚动的内容。本文将深入讲解如何利用HTML、JavaScript以及可能涉及的CSS来实现这一...

    15天学会JQuery(转载)

    **jQuery基础** jQuery是一款高效的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。"15天学会JQuery"的学习计划旨在帮助初学者快速掌握jQuery的核心概念和实用技巧。 1. **选择器**: ...

    js实现的3d效果(很炫+转载)

    1. **WebGL基础**:WebGL提供了一个上下文对象,通过这个对象,开发者可以设置渲染环境、创建几何形状、定义材质和光照,以及管理渲染管线。理解顶点坐标系统、颜色、纹理、视口等基本概念是至关重要的。 2. **3D...

    页面刷新方法汇总(转载)

    - **F5键刷新**:这是最基础的刷新方式,用户只需按下F5键,浏览器会重新向服务器发送请求,获取整个页面的新内容。 - **Ctrl+F5强刷**:与F5不同,Ctrl+F5会忽略浏览器的缓存,强制获取服务器上的最新内容。 - *...

    AJAX学习手记,网络转载,来之不易.

    **AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这一技术的核心在于JavaScript,XML则通常...

    软件开发人成长经历(转载)

    这包括掌握编程语言的基础语法,如C、Java、Python或JavaScript等。理解变量、数据类型、控制结构、函数等基本概念是必要的起点。此外,学习算法和数据结构也是这一阶段的重点,它们对提高编程能力至关重要。 随着...

    jquery 分页 为了收藏纯属转载

    ### 1. 分页的基本概念 分页是将大量数据分成多个小部分,每次只加载一部分到页面上,用户可以逐页浏览。这样不仅可以减少页面加载时间,也能让用户更容易找到目标信息。 ### 2. jQuery分页插件的使用 jQuery提供...

    易语言网页应用专题(转载)

    1. **易语言基础**:首先,你需要了解易语言的基本结构、语法规则和编程思想。这包括变量定义、条件语句、循环语句、函数和模块的使用等基础内容。 2. **网络通信**:网页应用的核心是网络通信,易语言提供了多种...

    flash制作的酒店全景(转载)

    一、Flash技术基础 Flash主要由ActionScript编程语言和Flash Player插件组成,允许开发者创建动画、交互式内容、游戏和应用程序。ActionScript是基于ECMAScript的脚本语言,为开发者提供了丰富的功能,如对象导向...

    JS高手做的

    标题“JS高手做的”暗示了这是一个使用JavaScript编程语言完成的项目或应用,而描述中的“全部用JS完成,一个JS高手做的,特转载”进一步强调了这个项目完全依赖JavaScript技术,并且是由一位经验丰富的JavaScript...

    《Java-Web应用开发基础》综合练习3.docx

    Java-Web应用开发基础知识点总结 以下是从给定的文件中提炼出的相关知识点: 1. COOKIE:Cookie是小段的文本信息,通过使用Cookie可以标识用户身份、记录用户名及密码、跟踪重复用户。Cookie在服务器端生成并发...

Global site tag (gtag.js) - Google Analytics