JavaScript(5)--- 面向对象 + 原型

面向对象 + 原型

面向对象这个概念并不陌生,如 C++、Java 都是面向对象语言。面向对象而言都会现有一个类的概念 ,先有类再有对象。类是实例的类型模板。javascript

好比人类 是一个类 张三 李四 就是一个个对象,他们都是人类建立出的对象 因此都有人类的共同特性,好比 人类都会吃饭 人类都会走路 因此张三李四也会吃饭和走路。java

JavaScript 没有类的概念,是基于原型的面向对象方式。它们的区别在于:编程

在基于类的面向对象方式中,对象(object)依靠类(class)来产生。
在基于原型的面向对象方式中,对象(object)则是依靠构造函数(constructor)和原型(prototype)构造出来的。

面向对象语言的第一个特性毫无疑问是封装,在 JS 中,封装的过程就是把一些 属性方法 放到对象中“包裹”起来。segmentfault

1、建立对象三种方式

一、原始方式建立对象

1) 字面量的方式设计模式

示例函数

var per = {
            name: "张三",
            age: 20,
            sex: "男",
            say: function () {
                console.log("说话");
            }
        };

2) Object实例添加属性方法学习

示例this

var per2=new Object();
           per2.name="李四";
           per2.age=30;
           per2.sex="男";
           per2.say=function () {
             console.log("说话");
           };

优势:代码简单。prototype

缺点: 建立多个对象会产生大量的代码,编写麻烦,且并无实例与原型的概念。设计

解决办法:工厂模式。

二、工厂模式

概念 工厂模式是很是常见的一种设计模式,它抽象了建立具体对象的过程。JS 中建立一个函数,把建立新对象、添加对象属性、返回对象的过程放到这个函数中,

用户只需调用函数来生成对象而无需关注对象建立细节。

示例

function createObject(name,age) {
      this.name=name;
      this.age=age;
      this.say=function () {
        console.log("说话");
      };
    }
    var per1=createObject("张三",20);
    var per2=createObject("李四",30);

优势:工厂模式解决了对象字面量建立对象代码重复问题,建立类似对象可使用同一API。

缺点:由于是调用函建立对象,没法识别对象的类型。

解决办法:构造函数

三、构造函数

JS 中构造函数与其余函数的惟一区别,就在于调用它的方式不一样。任何函数,只要经过new 操做符来调用,那它就能够做为构造函数。

示例

//自定义构造函数----->实例化对象
    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
      this.say=function () {
        console.log("说话");
      };
    }
    //构造函数---->建立对象
    var per1=new Person("张三",20,"女");
    var per2=new Person("李四",30,"女");

经过构造函数new一个实例经历了四步:

1. 建立一个新对象;
2. 将构造函数内的 this 绑定到新对象上;
3. 为新对象添加属性和方法;
4. 返回新对象(JS 引擎会默认添加 return this;)。

而经过构造函数建立的对象都有一个constructor属性,它是一个指向构造函数自己的指针,所以就能够检测对象的类型。

alert(per1.constructor === Person) //true
alert(per1 instanceof Person) // true

可是仍然存在问题:

alert(per1.say == per2.say) //false

同一个构造函数中定义了say(),而不一样对象的同名函数倒是不相等的,意味着这两个同名函数的内存空间不一致,也就是构造函数中的方法要在每一个实例上从新建立一次。

这显然增长没必要要内存空间。

优势:解决了相似对象建立问题,且能够检测对象类型。

缺点:构造函数方法要在每一个实例上新建一次。

解决办法:原型模式。


2、原型模式

一、概念

在JS中,建立对象的方式有工厂模式和构造函数模式等; 而构造函数模式最大的问题在于:构造函数中的每一个方法都须要在实例对象中从新建立一遍,不能复用

因此为了解决这一个问题,就须要使用原型模式来建立对象。原型模式是把全部实例共享的方法和属性放在一个叫作 prototype(原型)的属性中 ,在建立一个函数

时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是经过调用构造函数而建立的那个对象实例的原型对象。

若是你学习过java,咱们能够简单理解原型就比如咱们的静态方法,任何对象均可以共享这个静态方法。

做用 共享数据,节省内存空间。

二、举例

使用原型,就意味着咱们能够把但愿实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次经过构造函数new一个实例,原型对象中定义

的方法都不会从新建立一次。

示例

//原型的做用之一:共享数据,节省内存空间
function Person() {
}
//经过构造函数的原型添加属性和方法
Person.prototype.name = "张三";
Person.prototype.age = "20";
Person.prototype.say = function() {
  alert('经过原型建立吃饭方法');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"张三"
alert(person2.name); //"张三"
alert(person1.say == person2.say); //true 经过原型建立的方法就为true

优势:与单纯使用构造函数不同,原型对象中的方法不会在实例中从新建立一次,节约内存。

缺点:使用空构造函数,实例 person1 和 person2 的 name都同样了,咱们显然不但愿全部实例属性方法都同样,它们仍是要有本身独有的属性方法。
而且若是原型中对象中有引用类型值,实例中得到的都是该值的引用,意味着一个实例修改了这个值,其余实例中的值都会相应改变。

解决办法:构造函数+原型模式组合使用。


3、构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每一个实例都有本身独有的属性,

同时又有对共享方法的引用,节省内存。

//原型的做用之一:共享数据,节省内存空间
    //构造函数
    function Person(age,sex) {
      this.age=age;
      this.sex=sex;
    }
    //经过构造函数的原型添加一个方法
    Person.prototype.eat=function () {
      console.log("经过原型建立吃饭方法");
    };

    var per1=new Person(20,"男");
    var per2=new Person(20,"女");
    alert(per1.eat == per2.eat); //经过原型建立的方法就为true

这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为普遍的一种建立对象的方法。


参考

一、JS面向对象编程之封装 基本上参考这篇写的,由于我认为它写的很是通俗易懂,不须要我再去整理了。很是感谢

二、js面向对象编程

三、JavaScript面向对象



别人骂我胖,我会生气,由于我内心认可了我胖。别人说我矮,我就会以为可笑,由于我内心知道我不可能矮。这就是咱们为何会对别人的攻击生气。
攻我盾者,乃我心里之矛(2)。
相关文章
相关标签/搜索