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,您能够定义并创建自己的对象。
创建新对象有两种不同的方法:
- 定义并创建对象的实例
- 使用函数来定义对象,然后创建新的对象实例
创建直接的实例
这个例子创建了对象的一个新实例,并向其添加了四个属性:
实例
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];
}
JS对象基础的更多相关文章
- js对象基础写法练习
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS对象基础 闭包等
一.我们知道js的基本数据类型包括:number,boolen,string,null及undefined; 看下面的一段代码: var abcobject = { firstname:" ...
- JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)
函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) { return i1 + i2;//如果不写return返回 ...
- 认识JS的基础对象,定义对象的方法
JS的基础对象: 1.window //窗口对象 2.document //文档对象 3.document.documentElement //html对象 4.docume ...
- javascript基础-js对象
一.js对象的创建 1.普通最简单的方式 var teacher = new Object( ); teacher.name = "zhangsan"; teacher.age = ...
- 前端(十七)—— jQuery基础:jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
- Node.js系列基础学习----安装,实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- js 对象深复制,创建对象和继承
js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...
随机推荐
- easyui toolbar 可以放在datagrid底下
html: <div class="easyui-tabs" style="height: 250px;" tools="#t_rank&quo ...
- NopCommerce——源代码的组织,以及系统的架构
近来使用NopCommerce进行开发,仿照源码的Demo也能做出看上去还蛮高端大气上档次的系统出来,现下准备深入学习学习.首先从官方的Documentation开始看起,先来一篇官网文章的翻译(园里 ...
- 【Leetcode】 - Divide Two Integers 位运算实现整数除法
实现两个整数的除法,不许用乘法.除法和求模.题目被贴上了BinarySearch,但我没理解为什么会和BinarySearch有关系.我想的方法也和BS一点关系都没有. 很早以前我就猜想,整数的乘法是 ...
- 3144:[HNOI2013]切糕 - BZOJ
题目描述 Description 经过千辛万苦小 A 得到了一块切糕,切糕的形状是长方体,小 A 打算拦腰将切糕切成两半分给小 B.出于美观考虑,小 A 希望切面能尽量光滑且和谐.于是她找到你,希望你 ...
- CentOS 大量的TIME_WAIT解决方法
CentOS 大量的TIME_WAIT解决方法 最近个人博客总是出现无法打开的现象,具体表现为,打开页面需要等待n长时间,登陆系统后发现系统存在大量TIME_WAIT状态的连接,google了一下解决 ...
- DIV+CSS高手必知的15个CSS常识
1.不要使用过小的图片做背景平铺.这就是为何很多人都不用 1px 的原因,这才知晓.宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源. 2.无 ...
- 【BZOJ】【2132】圈地计划
网络流/最小割 Orz Hzwer 这类大概是最小割建模中的经典应用吧…… 黑白染色,然后反转黑色的技巧感觉很巧妙!这个转化太神奇了…… /****************************** ...
- Matlab中数组下标是logical,如何处理?
K>> a = 10*ones(1,10); K>> b = [1 56 23 5 6 45 9 7 89 10]; K>> c = b<a c = 1 0 ...
- Introduction to Deep Neural Networks
Introduction to Deep Neural Networks Neural networks are a set of algorithms, modeled loosely after ...
- 【log4net】配置文件
相关资料: http://www.cnblogs.com/dragon/archive/2005/03/24/124254.html 注意: //如果为了使得应用程序的配置文件(web/app.con ...