您的位置:首页 > Web前端 > JavaScript

JavaScript 自定义对象

2017-10-20 11:46 302 查看
原文:http://www.cnblogs.com/polk6/p/4492757.html

JavaScript 自定义对象

  在Js中,除了Array、Date、Number等内置对象外,开发者可以通过Js代码创建自己的对象。


目录

1. 对象特性:描述对象的特性

2. 创建对象方式:对象直接量、new 构造函数、Object.create() 等三种方式

3. 序列化对象:序列化和反序列化对象

4. 面向对象编程:描述自定义对象的面向对象模拟;包含实例成员、静态成员等等

5. 继承:描述对象的继承特性。


1. 对象特性

① 结构类似'字典' :对象的属性类似键/值对;属性的名称为字符串,属性的值为任意类型。

② 原型继承:Js的对象可继承原型的属性。

③ 动态结构:可动态新增、删除对象的属性。

④ 引用类型:js中的对象为引用类型。a为一个对象,b=a,修改b也会造成a的修改。


2. 创建对象方式

Js中创建自定义对象,主要通过三种方式:对象直接量、new 构造函数以及Object.create()方法。每一种创建方式继承的原型对象都不同:

① 对象直接量:原型为Object.prototype。

② new 构造函数:原型为构造函数的prototype属性。

③ Object.create():原型为传入的第一个参数,若第一个参数为null,以Object.prototype为原型。


2.1 对象直接量

说明:直接通过 属性名/值来创建。

语法:var o = { name:'tom', age:22 };

原型:Object.prototype

适用场景:应用在某一特定的作用域里。

示例:


2.2 new 构造函数

说明:构造函数也是种函数,但为了区分平常所用的函数,构造函数的函数名采用大骆驼峰写法(首字母大写)。

语法:var o = new ClassName();

原型:构造函数的prototype属性。

示例:


2.3 Object.create(prototype, propertyDescriptor) :ECMAScript 5规范

说明:创建并返回一个指定原型和指定属性的对象。

语法:Object.create(prototype, propertyDescriptor)

参数:

①prototype {prototype} :创建对象的原型,可以为null。若为null,对象的原型为undefined。

②propertyDescriptor {propertyDescriptor} 可选:属性描述符。

原型:默然原型型为①参;若①参为null,对象的原型为undefined。

示例:


3. 序列化

  Js中通过调用JSON方法,可以将对象序列化成字符串,也可以将字符串反序列化成对象。


3.1 JSON.stringify(object) :序列化对象;把对象转换成一个字符串。

参数:

①object {Object} :任意对象

返回值:

{string} 返回一个转换后的字符串。

示例:


3.2 JSON.parse(jsonStr) :将一个Json字符串转换为对象。

参数:

① jsonStr {JsonString} :一个Json字符串;字符串中的属性名称要用引号框起来

返回值:

{Object} 返回一个转换后的对象

示例:


4. 面向对象编程

  模拟高级语言的中的对象;描述高级对象中的实例成员、静态成员、继承等特性。


4.1 this关键字

说明:在创建对象的构造函数、方法成员中,this指向为实例对象本身。

示例:


4.2 实例成员

语法:实例对象.属性名称 或者 实例对象[属性名称]

有以下几种添加方式:

① 在创建对象的方式中(构造函数、对象直接量等),对this进行添加成员操作。

② 对类名的原型对象添加成员。

③ 对实例对象添加成员(只影响添加的实例,其他实例不会有此成员)。

示例:


4.3 静态成员

说明:通过类名直接调用

语法:类名.属性名称

添加方式:直接在类名上添加成员。

示例:


5. 继承

  js通过对原型的操作,可以模拟高级语言对象中的继承特性。


5.1 单层继承

说明:对类的原型对象(className.prototype)添加成员后,此类的所有实例对象都会增加此成员。



示例:


5.2 多层继承

说明:

若类的原型对象(className.prototype)指向为某个对象后,此类将会继承对象的所有实例成员,但不会继承对象的静态成员。



示例:

  

==================================系列文章==========================================

本篇文章:3.8 JavaScript 自定义对象

Web开发之路系列文章

1.HTML

  1.1 HTML页面源代码布局介绍

  1.2 HTML基础控件介绍

  1.3 iframe 和 frameset 的区别

  1.4 name、id、class 的区别

  1.5 table、form表单标签的介绍以及get和post提交方式

  1.6 HTML kbd键盘元素

  1.7 HTML 鼠标坐标和元素坐标

2.CSS 层叠样式表

  2.1 CSS 选择器及各样式引用方式

  2.2 CSS HTML元素布局及Display属性

  2.3 CSS Float 浮动属性

  2.4 CSS Position 定位属性

  2.5 CSS border-radius边框圆角

  2.6 CSS background-image背景图片相关介绍

3.JavaScript介绍

  3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

  3.2 JavaScript function函数种类

  3.3 JavaScript Array对象

  3.4 JavaScript Date对象

  3.5 JavaScript Math和Number对象

  3.6 JavaScript String对象

  3.7 JavaScript Object对象

  3.8 JavaScript 自定义对象

  3.9 JavaScript 对象属性介绍

  3.10 JavaScript 开发规范

  3.11 JavaScript 加号运算符详解

4.BOM

  4.1 HTML BOM Browser对象

  4.2 HTML 获取屏幕、浏览器、页面的高度宽度

  4.3 HTML URL地址解析

5.DOM

  5.1 HTML DOM 介绍

  5.2 HTML DOM 对象

  5.3 HTML 事件(一) 事件的介绍

  5.4 HTML 事件(二) 事件的注册与注销

  5.5 HTML 事件(三) 事件流与事件委托

  5.6 HTML 事件(四) 模拟事件操作

6.HTML5
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: