首页 > web前端 > js教程 > 正文

JavaScript的面向对象设计

高洛峰
发布: 2016-11-26 11:29:49
原创
1033 人浏览过

依据W3C School的定义,Javascript是面向对象的语言, 虽然没有类(class),但到处是对象. 可以理解只有定义而没有声明, 直接用就行. 其中的每个对象都可以理解为一组Key-Value的组合.

附上W3C School的说明:
 面向对象语言的要求
  一种面向对象语言需要向开发者提供四种基本能力:
封装 - 把相关的信息(无论数据或方法)存储在对象中的能力
聚集 - 把一个对象存储在另一个对象内的能力
继承 - 由另一个类(或多个类)得来类的属性和方法的能力
多态 - 编写能以多种方法运行的函数或方法的能力
ECMAScript 支持这些要求,因此可被是看做面向对象的。


下面就是一比较规矩的对象定义 (以下的例子参考了<>):
 var person = new Object();
 person.name = "Horky";
 person.age = 40;
 person.job = "Software Engineer";

 person.sayName = function(){
document.write(this.name);
}

调用方式:
  person.sayName();

  document.write("

Age: ");
  document.write(person.age);
 
  document.write("

Job: ");
  document.write(person["job"]);

嗯,是的,所有属性都是public的,而且有两种不同的属性访问方式. (关于访问性的限定可以由属性(property)的特性(attribute)来设定.)

再一种是比较随意而且切中Key-Value的定义方式, 但是老版本的浏览器可不见得支持:
var person = (
 name: "Horky",
 age: 40,
 job: "Software Engineer",

 sayName: function(){
document.write(this.name);
 }
};

因为Javascript的变量本质是松散类型,说白了就是无政府主义型. 所以并不需要一开始不给出完整定义,而是像下面这样也是允许的 (展示需要,绝不推荐):
   var person = new Object();

   person.name = "Horky";
   person.sayName = function()
   {
       document.write(this.name);
    }

    person.sayName();
    person.age = 40;
    document.write("

Age: ");
    document.write(person.age);
    person.job = "Software Engineer";
    document.write("

Job: ");
    document.write(person["job"]);

也不是没有限制. 如果第一句改为下面这样可就不行了:
   var person;  或者 var person = "Undefined";
原因还是在Javascript中基本数据类型和引用类型还是泾渭分明的.

回顾一下前面所讲的JavaScript拥有面向对象的特性,前面两点不用多说, 引用类型就比较明显具备, 第三点稍后再说. 关于多态, 其实真有点牵强, 个人觉得更像是C/C++中的可变参数的函数. 因为这里的多态针对函数而言. 也就是一个函数的参数可以很随性, JavaScript也懒得限定,一切交给开发者吧.结果还整出一个多态来. 结合建构子举个例子吧:
function Person(name, age, job)
{
this.name = "Mr Nobody!";
this.age = 0;
this.job = "Hard to say!";

switch(arguments.length)
{
case 3:
this.job = job;
case 2:
this.age = age;
case 1:
this.name = name;
break;
}
this.introduceSelf = function()
 
{
 
document.write("

My name is: "+this.name);
 
document.write("

"+ this.age+" years old!");
 
document.write("

And, my job is : "+this.job);
}
}

var horky = new Person("Horky",40,"Software Engineer");
var arthas = new Person("Arthas",22);
var nobody = new Person();

这个函数Person()就是一个建构函数, 创建一个Person的对象并返回. 依据传入的不同参数执行不同的初始化,这也就是多态的一种体现了.

扩展一下,如果传入的是对象,如何实现复制呢? 这就是原型式继承的模式 (参<> 6.3.4).
增加一个全局函数:
function object(o)
{
  function F() {};
  F.prototype = o;
  return new F();
}

然后试试以下两个新的对象:
var horky_alias = object(horky);
var arthas_alias = object(horky, {name:{value:"Arthas"}});
第二个对象在复制horky时,顺便将其中的名字也给改了.

它可以工作的核心在F.prototype上. 因为这个特殊指针的存在,使得这一切成为可能.每个函数都有一个prototype,它是一个指向某个对象的指针, 而这个对象包含了所有实例可以共享的属性和方法, 很像是享元的概念.


下面就说一下继承. JavaScript中所讲的继承,说白了就是使子对象可以访问父对象. 所以有两个重点: 子对象中需要有一个父对象的实例, 那就是prototype. 于是一个典型的子对象定义出来了:
function Boy(name, age, job)
{
this.sex = "Male";
this.prototype = new Person(name,age,job);
this.introduceSelf = function()
 
{
 
this.prototype.introduceSelf();
 
document.write("

I am BOY!");
}
}

var boy = new Boy("A",3);

如果觉得使用prototype太过于底层,也有几分hack的味道,也可以使用"借用构造函数"的方式来实现简单一些继承. 


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板