JS对象基础

JavaScript 对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象只是带有属性方法的特殊数据类型。

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值将是:

12

访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法:

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后,x 的值将是:

HELLO WORLD!

创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

  1. 定义并创建对象的实例
  2. 使用函数来定义对象,然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

实例

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

亲自试一试

替代语法(使用对象 literals):

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

亲自试一试

使用对象构造器

本例使用函数来构造对象:

实例

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

亲自试一试

创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性:

假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

x=person.firstname;

在以上代码执行后,x 的值将是:

Bill

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

现在您可以试一下:

myMother.changeName("Ballmer");

亲自试一试

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (对象中的变量)
  {
  要执行的代码
  }

注释:for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性:

var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
  {
  txt=txt + person[x];
  }
更多相关文章
  • Node.js系列基础学习----安装,实现HelloWorld,REPL
    Node.js基础学习 1:简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Java ...
  • js对象深复制,创建对象和继承
    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 var a=[1,2,3], b=a; b[0]=0; a[0] 此时显示的结果为0,也就是说a和b ...
  • css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式)>[id>class>tag](选择器) 样式的优先级:(外部样式)Externa ...
  • JS对象继承篇
    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person(){ this.name = "Person"; } Person.prototy ...
  •   JavaScript is an Object Oriented Programming (OOP) language. JS是面向对象的编程语言(面向对象).An OOP language allows you to define your own objects and make your ...
  • 1.DOM 对象转成 jQuery 对象 var v = document.getElementById("v"); //DOM对象 var $v = $(v); //jQuery 对象 即:把js对象括号 然后前面加上$符号. 2.jQuery 对象转成 DOM 对象 var ...
  •      在JavaScript很多人复制一个对象的时候都是直接用"=",因为大家都觉得脚本语言是没有指针.引用.地址之类的,所以直接用"="就可以把一个对象复制给另外一个对象,如下代码: var i1 = 1; var i2 = i1; i2 = 2; al ...
  • 前台的js对象数组传到后台处理.在前台把js对象数组转化为json字符串,在后台把json字符串解析为List<>
一周排行
  • 出版社: 电子工业出版社作者: 刘晓辉 王春海 编著出版日期:2009年1月国标编号:ISBN -条形码:  9787121077517字数: 934千字 印张: 36.5印数: ...
  • Linux运维第二阶段(四)用户及用户组管理1.配置文件(/etc/passwd,/etc/shadow,/etc/group,/etc/gshadow):#whatis passwd#man 5  passwd(配 ...
  • 目录第 1 天第 2 天第 3 天第 4 天第 5 天第 6 天第 7 天0. 前言欢迎来到第六天的 MVC 系列学习中.希望你在阅读此篇文章的时候,已经学习了前五天的内容,这也是第六天学习的前提条件.1. Lab ...
  • MySQL5.6半同步复制-非强一致性
    接上一篇blog,现在证实5.6的半同步复制.截图如下.主库会话一查询数据.将从库io复制 ...
  •       最近无事,又想了一些问题.现在的状况不知道该怎么总结,或者说是以前和现在的变化,终是现实和虚幻之间的变化吧.我想是这样的,但逻辑上怎么说呢,说不清,是现在现实了,还是更虚幻了.以前的总是生活在现实中,简单 ...
  • linux内核有五种调度方法:SCHED_FIFO 实时调度策略,first in first outSCHED_RR 实时调度策略,robin round SCHED_OTHER 分时调度策略SCHED_BATCH ...
  •      安装了SP1补丁的Exchange Server 2007增加了图形界面设置收发邮件大小的功能,比起之前版本的命令行操作简便很多.此功能的具体位置为"组织配置"-"集线器传输& ...
  • 现如今,面对传统的运维管理系统,IT管理员们总是忙前忙后的进行着更新维护,而通过优化网络运维管理系统来减轻运维压力,是必然趋势.     新一代网管工具所提供的解决方案能把过去人工.繁杂的网络管理工作变成自动化,并且 ...
  • 我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表 ...
  • 关于我——记百度用户体验部年会节目我
    关于“我”,你知道什么 ?我的快乐我的理想我的来头 我的过程……“我”来自百度用户体验部. ...