`
kamuikyo
  • 浏览: 28256 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

JavaScript语言基础(五) 自定义对象

阅读更多

一、对象创建方式 

1) 对象初始化器方式

格式:objectName = {property1:value1, property2:value2,…, propertyN:valueN} ,可以想象为一个HashMap;这里其实是JSON数据类型
property是对象的属性
value则是对象的值,值可以是字符串、数字或对象三者之一
例如: 

 

<html>
<head>
<title>test</title>
<script type="text/javascript">
function test() {
var user = {
name : "user1",
age : 18,
getName : function() {
return this.name;
}
}
alert(user.name);//直接取对象的属性值
//或者用下面这样也可以取值
alert(user['name']);
alert(user.getName());//调用方法
}
</script>
</head>
<body onload="test()"></body>
</html>
 

2) 函数方式

包含的方式比较多,流行的是构造函数/原型方式 ,当然也可看看jqueryextjs的源码看看别人都再用什么样的方式。

a. 工厂方式;

b. 构造函数方法;

c. 原型方式;

d. 混合的构造函数/原型方式;

e. 动态原型方法;

f. 混合工厂方式;

举一个简单例子

<html>
<head>
<title>test</title>
<script type="text/javascript">
//定义对象User;采用“构造函数方法”
function User1(name) {
this.name = name;
this.getName = function() {
return this.name;
}
}
//定义对象User2;采用“原型方式”
function User2() {};
User2.prototype.name ="hello world";
User2.prototype.setName = function(name) {
this.name = name;
}
User2.prototype.getName = function() {
return this.name;
}
//测试
function test() {
//创建对象实例
var user = new User1("name1");
alert(user.name);
alert(user.getName());
var user2 = new User2();
user2.setName("name2");
alert(user2.name);
alert(user2.getName());
}
</script>
</head>
<body onload="test()"></body>
</html>
 

详细可参看http://www.cnblogs.com/QiuYun/archive/2007/03/22/684523.html 

 

二、对象的属性

 

JS中可以为对象定义三种类型的属性:私有属性、实例属性和类属性,与Java类似,私有属性只能在对象内部使用,实例属性必须通过对象的实例进行引用,而类属性可以直接通过类名进行引用。

1) 私有属性定义
私有属性只能在构造函数内部定义与使用。
语法格式:var propertyName=value
例如:

function User(age){
           this.age=age;
           var isChild=age<12;
           this.isLittleChild=isChild;
}
var user=new User(15);
alert(user.isLittleChild);//正确的方式
alert(user.isChild);//报错:对象不支持此属性或方法
 

 

2) 实例属性定义,也存在两种方式:
prototype方式,语法格式:functionName.prototype.propertyName=value
this方式,语法格式:this.propertyName=value,注意后面例子中this使用的位置
上面中value可以是字符创、数字和对象。

3) 类属性定义
语法格式:functionName.propertyName=value

例如:

function User(){ }
User.MAX_AGE=200;
User.MIN_AGE=0;
alert(User.MAX_AGE);

 

4) 对于属性的定义,除了上面较为正规的方式外,还有一种非常特别的定义方式,

    语法格式: obj[index]=value

    例如:

function User(name){
        this.name=name;
        this.age=18;
        this[1]=“ok”;
        this[200]=“year”;
}
var user=new User(“user1”);
alert(user[1]);

    在上面例子中,要注意:不同通过this[1]来获取age属性,也不能通过this[0]来获取name属性,即通过index方式定义的必须使用index方式来引用,而没有通过index方式定义的,必须以正常方式引用 

 

三、属性与方法的动态增加和删除

1) 对于已经实例化的对象,我们可以动态增加和删除它的属性与方法,语法如下(假定对象实例为obj):
动态增加对象属性
obj.newPropertyName=value;
动态增加对象方法
    obj.newMethodName=method或者=function(arg1,,argN){}
动态删除对象属性
    delete obj.propertyName
动态删除对象方法
    delete obj.methodName  

例如

 

<html>
<head>
<title>test</title>
<script type="text/javascript">
//定义对象User;采用“构造函数方法”
function User1(name) {
this.name = name;
this.getName = function() {
return this.name;
}
}
//测试
function test() {
//创建对象实例
var user = new User1("name1");
alert(user.getName());
//动态添加新属性和方法
user.age = 10;
user.setAge = function(age){
this.age = age;
}
user.getAge =  function() {
return this.age;
}
alert(user.getAge());
delete user.name;
delete user.getName;
//当然出此作用域后动态添加的方法就没有了
alert(user.name);//显示undefined
test2();
}
function test2() {
var user = new User1("name2");
alert(user.getName());
}
</script>
</head>
<body onload="test()"></body>
</html>
 

 

 

分享到:
评论

相关推荐

    JavaScript零基础入门到精通视频教程

    第09节 面向对象-自定义对象\JavaScript视频课程-第09节 面向对象-自定义对象 第10节 面向对象-类与对象(上)\JavaScript视频课程-第10节 面向对象-非静态类(上) 第11节 面向对象-类与对象(中)\已

    dinoql一种可自定义的GraphQL样式查询语言用于与JavaScript对象进行交互

    一种可自定义的GraphQL样式查询语言,用于与JavaScript对象进行交互。 使用dinoQL遍历JavaScript对象的方式与使用GraphQL查询API的方式相同。

    JavaScript语言教程及案例.docx

    ### JavaScript语言教程: #### 1. 基础语法和数据类型: - JavaScript是一种脚本语言,通常用于在Web浏览器中实现交互式功能。 - 基本数据类型包括数字、字符串、布尔值、数组、对象等。 - JavaScript具有C和Java...

    网页特效—JavaScript.ppt

    JavaScript简介 在网页中插入JavaScript的方法及定义 JavaScript的基本数据类型和表达式 ...基于对象的JavaScript语言 JavaScript的内置对象 自定义对象 DOM对象及编程 JavaScript的对象事件处理程序

    JavaScript基础和实例代码

    第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值...

    javascript完全学习手册1 源码

    3.6 自定义对象 67 第4章 JavaScript常用对象 73 4.1 Document对象 73 4.1.1 Document对象概述 73 4.1.2 使用Document对象 75 4.2 Form对象及其元素 79 4.2.1 Form对象概述 79 4.2.2 表单元素 80 4.2.3 表单元素属性...

    javascript完全学习手册2 源码

    3.6 自定义对象 第4章 JavaScript常用对象 4.1 Document对象 4.1.1 Document对象概述 4.1.2 使用Document对象 4.2 Form对象及其元素 4.2.1 Form对象概述 4.2.2 表单元素 4.2.3 表单元素属性和事件 ...

    JavaScript 类的定义和引用 JavaScript高级培训 自定义对象

    在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类、Hashtable类等等。 目前在Javascript中,已经存在一些标准的类,例如Date、Array、...

    JavaScript前端开发的核心语言前端开发的核心语言

    JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念,使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法,对功能进行封装和复用,提高代码的可读性和可维护性。

    JavaScript 三种创建对象的方法

    JavaScript中对象的创建有以下几种方式: (1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造 一、使用内置对象 JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String、...

    源文件程序天下JAVASCRIPT实例自学手册

    第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值...

    《JavaScript学习指南(第2版)》[PDF]

     基于浏览器对象模型(BOM)、文档对象模型(DOM)以及所创建的自定义对象完成开发;  浏览器端的cookie及更新的客户端存储技术;  在Ajax应用程序中使用XML或JSON表示法的细节。本书遵循已被验证的学习法则,...

    JavaScript面向对象程序设计创建对象的方法分析

    本文实例讲述了JavaScript面向对象程序设计创建对象的方法。...object构造函数:创建自定义对象的最简单方式就是创建一个object的实例,然后为这个实例添加属性和方法: var person=new object(); p

    JavaScript学习指南(第2版).pdf

    ● 基于浏览器对象模型(BOM)、文档对象模型(DOM)以及所创建的自定义对象完成开发; ● 浏览器端的cookie及更新的客户端存储技术; ● 在Ajax应用程序中使用XML或JSON表示法的细节。 本书遵循已被验证的学习法则...

    javascript如何创建对象

    对象分为系统对象和自定义对象两种。我们可以通过调用系统构造函数来创建出系统对象,如:array|date等。自定义对象必须自己创造,无法利用系统函数来创造。 javascript创建对象  一、直接创建 //直接创建 //...

    javascript学习笔记.docx

    若值与对象比较,核心语言内部类会尝试用valueof()转换,再尝试用toString()转换。就是说valueof()会比toString()有更高的优先级。但规则不绝对,例如Date类,它会首先尝试用toString()转换。当类的这两个方法实现不...

    JavaScript详解(第2版)

    1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 浏览器是否已启用JavaScript 16 1.11 JavaScript代码放在哪儿...

    Java语言基础下载

    基于对象的JavaScript语言 522 对象的基础知识 522 this关键词 523 new运算符 523 常用对象的属性和方法 525 算术函数的math对象 527 创建新对象 529 JavaScript中的数组 532 实例 535 文档对象功能及其作用 538 ...

Global site tag (gtag.js) - Google Analytics