JavaScript 建立和浅析自定义对象

本文转载于：http://www.javashuo.com/article/p-wjojwsqo-y.html

在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 

适用场景：应用在某一特定的做用域里。

示例：

1 2 3 4 5

var  o = {      name:  'tom' } console.log(o.constructor.prototype);  // => Object() ：对象直接量的原型为Object console.log(o.constructor.prototype === Object.prototype);  // true

  

2.2 new 构造函数

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

语法：var o = new ClassName();

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

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 1.建立构造函数 function  People(name) {      this .name; }   var  p =  new  People( 'Tom' ); console.log(p.constructor.prototype);  // => People{} ：原型为构造函数的prototype console.log(p.constructor.prototype === People.prototype);  // => true   // 2.自定义对象的多层继承 ：constructor返回最早调用的构造函数  function  Student(age) {      this .age = age; } Student.prototype =  new  People();  // 设置Student的原型为People对象   var  s =  new  Student(22);  // 对象初始化时，先调用People()，再调用Student() console.log(s.constructor);  // => function People ：对象s返回的构造函数为People console.log(s.constructor.prototype);  // => People{} ：原型对象为People console.log(s.constructor.prototype === People.prototype);  // => true

 

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

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

语法：Object.create(prototype, propertyDescriptor)

参数：

①prototype {prototype} ：建立对象的原型，能够为null。若为null，对象的原型为undefined。

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

原型：默然原型型为①参；若①参为null，对象的原型为undefined。

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 1.创建一个原型为null的对象 var  o = Object.create( null , {      name: {          value:  'tom'      } }); console.log(o.constructor);  // => undefined    // 2.建立一个原型为Array的对象 var  array = Object.create(Array.prototype, {}); console.log(array.constructor);  // => function Array 构造函数  console.log(array.constructor.prototype);  // => [] ：原型对象为数组   // 3.建立一个原型为自定义类的对象 function  People() { } var  p = Object.create(People.prototype, {}); console.log(p.constructor);  // => function People 构造函数  console.log(p.constructor.prototype);  // => People{} ：原型对象People

 

3. 序列化

　　Js中经过调用JSON方法，能够将对象序列化成字符串，也能够将字符串反序列化成对象。

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

参数：

①object {Object} ：任意对象

返回值：

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

示例：

1 2 3 4 5 6

var  o = {      x: 1,      y: 2 }   JSON.stringify(o);  // => {"x":1,"y":2}：返回一个字符串

 

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

参数：

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

返回值：

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

示例：

1 2 3

var  str =  '{ "x":1,"y":2 }' ;  // 字符串的属性名要用引号框起来 var  o = JSON.parse(str); console.log(o.x);  // => 1：输出对象属性x的值

 

4. 面向对象编程

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

4.1 this关键字

说明：在建立对象的构造函数、方法成员中，this指向为实例对象自己。

示例：

1 2 3 4 5 6 7 8 9

var  o = {      x: 1,      y: 2,      sayHello:  function  () {          console.log( this .x);  // => 1：读取实例对象属性x的值          console.log(x);  // => 报错：读取的是变量x      } }; o.sayHello();

 

4.2 实例成员

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

有如下几种添加方式：

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

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

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

示例：

1 2 3 4 5 6 7 8 9 10 11 12

// 1.在建立对象方式中，对this进行操做 function  People(name) {      this .name = name; } var  p =  new  People( 'tom' ); console.log(p.name);  // => tom ：读取实例属性name的值   // 2.在类的原型对象中进行扩展操做 People.prototype.sayHello =  function  () {      alert( 'Hello:'  +  this .name); } p.sayHello();  // => 弹出 Hello:tom

 

4.3 静态成员

说明：经过类名直接调用

语法：类名.属性名称

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

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13

function  People(name) {      this .name = name; } // 给类添加一个静态成员hasName：判断People实例是否含有name属性 People.hasName =  function  (p) {      if  (p.name && p.name.length > 0) {          return  true ;      }      return  false ; }   var  p =  new  People( 'tom' ); People.hasName(p);  // => true

  

5. 继承

　　js经过对原型的操做，能够模拟高级语言对象中的继承特性。

5.1 单层继承

说明：对类的原型对象(className.prototype)添加成员后，此类的全部实例对象都会增长此成员。

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function  People(name) {      this .name = name; } var  p1 =  new  People( '张三' ); var  p2 =  new  People( '李四' );   // p1.sayName(); // 报错，实例没有此成员   // 对原型对象添加成员， 类的全部实例都会添加此成员 People.prototype.sayName =  function  () {      alert( this .name); }   p1.sayName();  // 弹出name属性的值 p2.sayName();  // 弹出name属性的值

 

5.2 多层继承

说明：

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

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function  People(name) {      this .name = name;      this .sayName =  function  () {          alert( this .name);      } }   function  Student(age) {      this .age = age; } Student.prototype =  new  People();  // 设定Student的原型对象为Prople实例对象   var  st =  new  Student(22); st.name =  '张三' ; st.sayName();  // => alert('张三') ：sayName成员继承自People类

　　

 

End