Javascript创建类和对象详解

现总结一下Javascript创建类和对象的几种方法：

1、原始的创建方法：

<script type="text/javascript">
  var person = new Object();
  person.name="Amy";
  person.sex="Woman";
  person.show=function(){
    document.write("name is: "+this.name+" ; sex is:"+this.sex);
  }
  person.show();
</script>

原始的创建方法对于熟悉面向对象的人来说难以接受，总感觉属性和方法的封装不是很紧密，这种封装是以“对象名”+“.”的方式进行，表示对象名后跟的属性和方法是这个对象拥有的东西，这个对象（例如：person）就是封装好的结果，你可以继续追加方法和属性，例如追加age属性：person.age=23;这种创建方法会让熟悉Java编程的人感到很难受。我们可以对原始的创建方法进一步“封装”一下，请看下一步：

2、工厂方法模式：

 <script type="text/javascript">
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=function(){
       document.write(ob.name+" "+ob.age+" "+ob.sex);
     }
     return ob;
   }
   var person=personFactory("Amy",21,"Woman");
   person.show();
 </script>

工厂方法模式看起来更像一个类了，personFactory对原始的创建方法进行了封装，并将创建好的对象返回给person引用变量，person就可以引用这个创建好的对象了，但是还不够完美：你每一次创建一个对象， 并使用该对象调用show()方法时，都会创建新的show()函数，它们完全可以调用同一个show方法，优化方法是将show放到工厂外，如下：

 <script type="text/javascript">
   function show(){
     document.write(this.name+" "+this.age+" "+this.sex);
   }
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=show;
     return ob;
   }
   var person=personFactory("Amy",22,"Woman");
   person.show();
 </script>

从功能上说，上面的代码解决了函数重用问题，但是呈现方式不像是创建一个对象，熟悉Java的人仍感到难受。请看下一步：

3、构造方法模式：

 <script type="text/javascript">
   function person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.show=function(){
       document.write(this.name+" "+this.age+" "+this.sex);
       document.write("<br>");
     }
   }
   var per=new person("Amy",22,"Woman");
   per.show();
 </script>

上述代码的创建方式已经与Java类和对象的创建方式几乎一样了，封装好类的属性和方法，然后利用new关键字创建并返回一个对象，这不就是Java创建类和对象的过程吗，是的，就是这个过程，但是还可以优化，这种方式创建的对象调用show方法是也会即时地创建一个show函数，我们能不能创建一个所有对象公用的一个方法呢？就像Java类中的static方法一样，所有对象都使用同一个static方法，答案是可以的。请看下一步：

4、动态原型方法：

 <script type="text/javascript">
   function Person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     if(typeof Person.tag == "undefined"){
       Person.prototype.show=function(){
         document.write(this.name+" "+this.age+" "+this.sex);
         document.write("<br>");
       }
       Person.tag=true;
     }
   }
   var per=new Person("Peter",22,"Man");
   per.show();
 </script>

这里使用了一点技巧，当用new创建对象是，会执行Person功能块中的if判断语句，顺序从上往下，刚开始tag变量当然没有定义，所以执行if语句块里的内容：

Person.prototype.show=function(){
 document.write(this.name+" "+this.age+" "+this.sex);
 document.write("<br>");
 }

这段内容的含义是创建一个属于类Person的show方法，注意，它是一个类方法，相当于Java中static修饰后的方法，而非单个对象的方法，这样所有的对象均可调用同一个方法了，这样也不用每次不同对象调用方法是都创建自己的show函数了，既节省空间又节省时间，这种方法岂不更妙。这里解释一下，以“类名.prototype.属性/方法”方式构造的属性和方法相当于Java中用static修饰的变量或方法，是属于整个类的，而非单个的对象，也即所有对象是共享的。

以上是学习JS类和对象的总结，其中个人理解错误之处还望大家批评指正。

赞 (0)

相关推荐

  • JavaScript 创建对象和构造类实现代码

    创建一个对象 Java代码 复制代码 代码如下: <script type="text/javaScript"> var newObject=new Object(); //创建一个对象 newObject.firstName="frank"; //增加一个firstName属性 newObject.sayName=function(){ alert(this.firstName); } //添加一个sayName方法 //调用sayName方法 //

  • JavaScript 常见对象类创建代码与优缺点分析

    在Javascript中构建一个类有好几种方法: 1.Factory 方式 复制代码 代码如下: function createCar(){ var car = new Object(); car.color="b"; car.length=1; car.run=function(){alert("run");} return car; } 定义这么一个函数之后,就可以用: var car1 = createCar(); var car2 = createCar()

  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢. 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要

  • 创建js对象和js类的方法汇总

    代码很简单,就不多废话了. 复制代码 代码如下: //第一种定义方式 var person=new Object(); //创建了一个对象. person.name="tom"; //使用person对象对调用name属性,它的值为tom alert(person.name); //显示name属性值 person.say=function(){ //对person对象添加了一个say函数. alert("person say"); }; person.say();

  • JS创建类和对象的两种不同方式

    在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数.下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后. var Person = function(name) { // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类 this.name = name; } function Person(name) { // 直接定

  • JavaScript中创建类/对象的几种方法总结

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 复制代码 代码如下: var emptyObj = {

  • JavaScript创建类/对象的几种方式概述及实例

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 复制代码 代码如下: var emptyObj = {

  • Javascript创建类和对象详解

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = new Object(); person.name="Amy"; person.sex="Woman"; person.show=function(){ document.write("name is: "+this.name+" ; se

  • 玩转JavaScript OOP - 类的实现详解

    玩转JavaScript OOP - 类的实现详解

    概述 当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念 对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"

  • Javascript之BOM(window对象)详解

    ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域 既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变

  • python基础之定义类和对象详解

    定义简单的类 面向对象是更大的封装,在一个类中封装多个方法,这样通过这个类创建出来的对象,就可以直接调用这些方法了! 定义只包含方法的类 在python中,要定义一个只包含方法的类,语法格式如下: #用class定义类名 class 类名: def 方法1(self,参数列表) #方法的属性中有且仅有一个self pass def 方法2(self,参数列表) #类之外定义的def是函数,在类里面定义的def叫做方法,而且括号里必须要有self pass class Student: pass

  • JavaScript字符串处理(String对象)详解

    定义字符串(String)对象 JavaScript String 对象用于处理文本字符串.创建 String 对象语法如下: 复制代码 代码如下: <script language="JavaScript"> var str_object = new String( str ); var str1 = String( str ); var str2 = str; </script> 以上三种方法中,只有第一种是使用 String 构造函数严格的定义一个字符串对

  • JavaScript创建数组的方法详解

    目录 JavaScript创建数组 数组的使用 将数组转换为分割字符串 数组中新增元素 筛选数组 删除数组指定元素 总结 JavaScript创建数组 1.利用new创建数组 var arr = new Array();//创建了一个空数组 2.利用数组字面量创建数组(比较常用) 字面量:一种固定值的表示方法 一看就知道什么数据类型,比如8一看就是数字类型 //1.利用数组字面量(是方括号)创建数组 var arr = [];//创建了一个空数组 var arr1 = [1,2,'student

  • javascript之Array 数组对象详解

    1.创建Array对象方法: --->var arr = [element0, element1, ..., elementn];//简单的定义方法 复制代码 代码如下: var arr = [1,2,3] 此时可以知道 复制代码 代码如下: arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); 复制代码 代码如下: var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0]

  • JavaScript中的Reflect对象详解(ES6新特性)

    Reflect介绍: Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ; Reflect不是构造函数, 要使用的时候直接通过Reflect.method()调用, Reflect有的方法和Proxy差不多, 而且多数Reflect方法原生的Object已经重新实现了. 什么要使用Reflect

  • JavaScript浏览器对象之一Window对象详解

    JavaScript浏览器对象之一Window对象详解

    JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo

  • JavaScript操作DOM对象详解

    JavaScript操作DOM对象详解

    一.DOM基础 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档:O(对象)可以理解为类似Window对象之类的东西,可以调用属性和方法,这里我们说的是document对象:M(模型)可以理解为网页文档的树型结构. 1.节点 加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内

随机推荐