js 面向对象模式

2019-03-02  本文已影响0人  sunflower_07
  1. 面向对象:
    就是将一个需求抽象成一个对象,然后针对对象分析特征(属性)与动作(方法)。

  2. 面向对象的特征:
    封装
    多态
    继承

  3. 创建面向对象的几种模式:(工厂模式、构造模式、原型模式、混合模式[原型模式+构造模式])
    一、工厂模式

    function test(name,sex){
    var o = new Object();
    o.name = name;
    o.sex = sex;
    o.say = function(){
    console.log(this.name);
    }
    return o;
    } 
    
工厂模式.png

;

二、构造模式

  function Ba (name){
    this.name = name;
    this.say = function(){
    console.log(this.name);
    }
}
var  b  = new Ba('huhu');
构造函数

注意:构造和工厂模式的相识点:解决创建多个相似对象的问题。
构造和工厂模式的区别:
1. 构造函数首字母需要大写;
2. 直接将属性和方法赋值给this 对象;
3. 没有 return 语句;
4. 使用new 创建对象
5. 可以识别属于哪个对象
构造函数缺点:
使用构造函数最大的问题就是,每次创建实例的时候都要重新创建一次方法 (say()) [ 实际上每次创建对象的时候,对象的属性均不相同,而对象的方法是相同的,所以创建两次完全相同的方法是没必要的,所有我们可以函数移到对象的外面]
放到对象的外面代码:

function a (name){
    this.name = name;
    this.say = say;
}
var say = function(){
    console.log(this.name);
    }
undefined
var q = new a('小胡')
构造函数2

;

这样的写法是把 say 写成全局函数了,显然失去了面向对象封装性了,所以可以通过原型来解决此问题。

三、原型模式
创建的每一个函数都有prototype(原型)属性,而这个对象的用途是包含特定类型的所有实例共享的属性和方法。使用原型对象的好处,就是可以让所有对象实例共享它所包含的属性和方法。

function Test (){}
Test.prototype.name = 'huhu';
Test.prototype.age = '12';
Test.prototype.say = function(){
  alert(this.name+'年龄'+this.age);
}

ƒ (){
  alert(this.name+'年龄'+this.age);
}
var a = new Test();
原型.png

缺点:重新给属性赋值的时候,也会直接修改原型上面的值,共享也是好处,也同样是缺点了。

四、 混合模式(原型模式+构造模式)

`````

function Test(name,age){
this.name = name;
this.age = age;
}
Test.prototype.say = function(){
console.log(this.name+':'+this.age);
}
var a1 = new Test('小明',20);
var a2 = new Test('小王',40);
console.log(a1.say());
console.log(a1.name);
console.log(a1.age);
console.log(a2.say());
console.log(a2.name);
console.log(a2.age);

![混合模式](https://img.haomeiwen.com/i6286160/20fa4f2757bec4e0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
混合模式中构造函数定义实例属性,原型模式定义方法和共享属性。每个实例都有自己的一份实例属性,同时又共享方法,最大的节省了内存。
上一篇 下一篇

猜你喜欢

热点阅读