`
kamuikyo
  • 浏览: 28895 次
  • 性别: 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>
 

 

 

分享到:
评论

相关推荐

    js自定义对象讲解

    在JavaScript中,自定义对象可以通过对象字面量或构造函数来创建,以扩展语言的功能。它们与JS的标准对象相对,后者如Date、Array等是由语言内置的。 1.2.2 原型(prototype) 原型是JavaScript中一种特殊的概念,...

    JavaScript语言基础.pdf

    ### JavaScript语言基础知识点详解 #### 1. 变量定义 **JavaScript** 是一种广泛使用的脚本语言,常用于Web前端开发。对于初学者来说,理解变量定义的基础知识至关重要。 - **变量命名规则**: - 变量名区分大小...

    JavaScript语言基础知识点总结十张图

    本文将基于“JavaScript语言基础知识点总结十张图”这一主题,深入探讨JavaScript的基础概念、语法特性以及核心知识点。 1. **变量与数据类型** JavaScript有七种数据类型:Undefined、Null、Boolean、Number、...

    JavaScript语言与Ajax应用JavaScript面向对象编程.pptx

    自定义对象是JavaScript面向对象编程的核心,可以通过构造函数或原型链来实现: - 构造函数方式:定义一个函数作为构造器,使用new关键字创建实例。 ```javascript function Person(name, age) { this.name = name...

    浅谈JavaScript对象之教学.pdf

    文章从对象的概念、使用原生对象、原型链的理解、自定义对象的创建和新的语法规范五个方面对JavaScript对象的教学要点进行了详细的探讨。 一、对象的概念 JavaScript是一种基于对象的脚本语言,在JavaScript中万物...

    《JavaScript语言精粹》.pdf

    《JavaScript语言精粹》这本书是深入理解这一语言的宝贵资源,它涵盖了JavaScript的核心概念和技术,旨在帮助读者掌握这门语言的精髓。 在描述中提到的"JavaScript语言精粹 包含pdf 与 epub"表明,这本书提供了两种...

    JavaScript语言精粹.源代码

    源代码可能会展示如何创建自定义对象、使用`this`关键字以及原型链的使用。 4. **事件处理**:JavaScript与HTML的交互主要通过事件处理,如点击、提交、鼠标移动等。书中可能通过例子解释如何绑定和处理这些事件,...

    1·5版核心JavaScript语言参考手册

    1.5版的核心JavaScript语言参考手册,针对的是JavaScript的早期版本,虽然现代的JavaScript已经发展到ES6(ECMAScript 2015)及其后续版本,但1.5版的基础知识仍然是理解和掌握JavaScript的必要起点。 一、变量与...

    JavaScript语言精粹

    通过阅读《JavaScript语言精粹》这本书,开发者不仅能掌握JavaScript的基础知识,还能深入理解其高级特性和最佳实践,从而在实际项目中编写出高效、健壮的代码。无论是初学者还是经验丰富的开发者,都能从中受益匪浅...

    JavaScript 语言基础知识点总结(思维导图)

    以下是对JavaScript语言基础知识点的详细总结: 1. 变量与数据类型: JavaScript 支持七种数据类型:Undefined、Null、Boolean、Number、BigInt、String 和 Symbol,以及一种复合类型——Object。变量声明使用 `...

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

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

    javascript脚本语言课件

    总的来说,这个"javascript脚本语言课件"将引导你从零开始掌握JavaScript,从基础语法到核心概念,再到实际的数据验证技术。通过学习,你将具备编写交互性强、用户体验优良的网页和应用程序的能力。记得结合PPT和...

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

    JavaScript允许程序员基于对象扩展机制自定义对象,类似于Java语言的方式。自定义对象通过定义新的构造函数来创建,可以为对象增加新的属性和方法。比如,可以自定义一个User类或Hashtable类。 2. 原型(prototype...

    javascript基础-->中级-->高级-->面向对象

    本文将深入探讨JavaScript的基础、中级和高级概念,特别是其面向对象特性。 一、JavaScript基础 1. 变量与数据类型:JavaScript支持动态类型,允许声明变量时无需指定类型。基本数据类型包括字符串(String)、数字...

    JavaScript语言中文参考手册

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,主要由Netscape公司的...通过深入学习和理解JavaScript的基础语法和高级特性,以及AngularJS的框架原理和API使用,开发者可以提升其在前端领域的专业技能。

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

    这就是"DinoQL"的出现背景,它是一种可自定义的GraphQL风格查询语言,专门设计用于与JavaScript对象进行操作。 DinoQL的核心概念是模仿GraphQL的查询语法,使得开发者可以以熟悉的方式来处理本地JavaScript对象,而...

    Arcgis for javascript 加载天地图及自定义图

    在GIS领域,ArcGIS for JavaScript 是一款非常强大的Web制图框架,它允许开发人员通过JavaScript语言在网页上创建交互式的地图应用。本话题主要聚焦于如何利用ArcGIS for JavaScript加载天地图以及添加自定义图层。 ...

Global site tag (gtag.js) - Google Analytics