JS中的面向对象

创建对象的几种常用方式:

  1,使用Object或对象字面量创建对象。

  2,工厂模式创建对象。

  3,构造函数模式创建对象。

  4,原型模式创建对象。

使用Object或对象字面量创建对象:  

var student = new Object();
        student.name = '顾清秋';
        student.age = '17';

字面量方式创建对象:

var student = {
            name:"顾清秋",
            age:17
        };

 

工厂模式创建对象:

JS中没有类的概念,那么我们不妨就使用一种函数将以上对象创建过程封装起来以便于重复调用,同时可以给出特定接口来初始化对象。

function createStudent(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    return obj;
}
var student1 = createStudent('qingqiu1',17);
var student2 = createStudent('qingqiu2',17);

这样一来我们就可以通过createStudent函数源源不断地”生产”对象了。看起来已经高枕无忧了,但贪婪的人类总有不满足于现状的天性:我们不仅希望”产品”的生产可以像工厂车间一般源源不断,我们还想知道生产的产品究竟是哪一种类型的。

比如说,我们同时又定义了”生产”水果对象的createFruit()函数:

function createFruit(name, color) {
  var obj = new Object();
  obj.name = name;
  obj.color = color;
  return obj;
}

var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");

对于以上代码创建的对象v1、v2,我们用instanceof操作符去检测,他们统统都是Object类型。我们的当然不满足于此,我们希望v1是Student类型的,而v2是Fruit类型的。为了实现这个目标,我们可以用自定义构造函数的方法来创建对象

构造函数模式创建对象:

var arr = new Array(10);  //构造一个初始长度为10的数组对象

构造函数和普通函数的区别:

  1,实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么他就是构造函数,不使用new操作符调用,它就是普通函数。

  2,按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于区分二者。

  3,使用new操作符调用构造函数时,会经历:

    1,创建一个新对象。

    2,将构造函数作用域赋给新对象(this指向该新对象)。

    3,执行构造函数代码。

    4,返回新对象。

使用构造函数将工厂模式函数重写,并添加一个方法属性:

 

function Student(name,age){
    this.name = name;
    this.age = age;
    this.alertName = function(){
        alert(this.name);
    }
}
function Fruit(name,color){
    this.name = name;
    this. color = color;
    this.alertName = function(){
        alert(this.name);
    }
}
var v1 = new Student('qingqiu',17);
var v2 = new Fruit('apple',"red");
console.log(v1);
console.log(v2);
v1.alertName()
v2.alertName()

 

这时我们再用instanceofcao'zuo

alert(v1 instanceof Student); //true
alert(v2 instanceof Student);//false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true

这样我们就解决了工厂模式无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢?使用构造器函数通常在js中我们来创建对象。

我们会发现Student和Fruit对象中共有同样的方法,当我们进行调用的时候这无疑是内存的消耗。

我们完全可以在执行该函数的时候再这样做,办法是将对象方法移到构造函数外部:

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = alertName;
}

function alertName() {
  alert(this.name);
}

var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);

在调用stu1.alertName()时,this对象才被绑定到stu1上。

我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题

但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

原型的模式创建对象:

function Student(name,age){
    this.name = name;
    this.age = age;
}
Student.prototype.alertName = function(){
    alert(this.name);
}
var stu1 = new Student('qingqiu',17);
var stu2 = new Student('xiaobai',17);

stu1.alertName();
stu2.alertName();

alert(stu1.alertName == stu2.alertName); 

 

 

posted @ 2018-05-30 16:17  Qingqiu_Gu  阅读(159)  评论(0编辑  收藏  举报