码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript中的面向对象表示

时间:2015-11-25 23:23:07      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

我们知道,面向对象的语言都有一个特点,那就是一般都有类的概念,进而有类的属性和方法等概念。

然而javaScript中并没有类的概念,那我们怎么去通过这个语言本身去实现一些面向对象的特性呢?

(1)一个最简单的方式

  创建Object的实例,为它添加属性和方法

var car = new Object();     //创建实例
car.color = "red";              //为car这个对象增加颜色的属性
car.showColor= function(){       //car的方法
  alert(this.color);
}

  后来发展为一种更为简便和直观的类似json的对象字面量的写法

var car = {
    color : "red",
    showColor : function(){
        alert(this.color);
    }   
}

  使用创建单个实例或是对象字面量的写法虽然可以创建单个对象,但是如果我们需要创建多个对象,以上方法就显得很麻烦,

  我们必须复制一套相同的代码,产生car2、car3,渐渐的,为了解决这个问题,我们开始采用工厂模式

 

(2)使用工厂模式创建对象

function makeCar(color){
    var car = new Object();        //创建一个实例
    car.color = color,             //添加属性
    car.showColor = function(){    //添加方法
        alert(this.color);
    }   
    return car;                    //将生成的实例返回
}

调用:
var car1 = car("red");
var car2 = car("green");

  工厂模式顺利解决创建多个对象时编写重复代码的问题。而另一个方面,通过上面这种方式,我们知道,car1和car2都是通过生成Object实例在附加属性和方法产生的,

  即他们都是Object的实例,所以我们并不能很好的知道产生的对象的类型。后来人们为了解决这个问题又提出了一种新的解决方法

 

(3)构造函数模式

function Car(color){                  //一般构造函数开头大写
    this.color = color;               //添加属性 
    this.showColor = function(){      //添加方法
        alert(this.color);
    }   
}

调用:
var car1 = new Car("red");
var car2 = new Car("green");

  比较构造函数模式和工厂模式我们可以看出以下区别

    1、在构造函数模式里面并没有new Object();方式创建实例和对此实例的赋值

    2、在构造函数模式里面没有返回创建的实例

    3、构造函数模式直接将属性和方法赋值给this对象

    4、构造函数模式使用new 操作符产生Car的对象

  通过上述的方法,我们就可以创建两个Car的对象,解决对象识别的问题(可以使用instanceof方法检验)

  那么使用上面的构造方法创建对象是不是没有缺点呢?答案是否定的,上面的代码中的创建方法的方式实际上相当于

  this.showColor = new Function("alert(this.color)");

  这样的话,new出多个对象就相当于创建了多个Function实例,而这个是浪费的。我们可以把它提出外面,像以下这样

function Car(color){                  //一般构造函数开头大写
    this.color = color;               //添加属性 
    this.showColor = showColor;
}
function showColor(){      //添加方法
    alert(this.color);
}   

  这种方法同样存在一个缺点,那就是会产生showColor这个全部的函数,是函数的封装性无法实现

 

(4)使用构造函数和原型链方式

function Car(color){                  //一般构造函数开头大写
    this.color = color;               //添加属性 
}
Car.prototype = {   
    constructor : Car,
    showColor : function(){
        alert(this.color);
    }
}   

  以上方式使用了原型链这一概念,关于原型链相关的知识有空再进行整理

  我们需要知道的是,使用原型链定义方法和共享的属性可以通过引用的方式共享,可以最大程度的节约内存。这是采用度较高的一种方式。

javaScript中的面向对象表示

标签:

原文地址:http://www.cnblogs.com/lhsu2014/p/4989937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!