JavaScript面向对象(封装)

阮一峰的网络日志

1.生成实例对象的原始模式

 var People = {
    name : '',
    age : ''
 }

根据这个原型对象生成两个实例对象

 var people1 = {};
    people1.name = 'jack';
    people1.age = 18;
 var people2 = {};
    people2.name = 'lucy';
    people2.age = 17;

这即为简单的封装,把两个属性封装在一个对象里面

缺点:
1.如生成多个实例,写起来麻烦。
2.实例与原型之间看不出联系

2.原始模式改进

function People(name,age) {
    return {
        name:name,
        age:age
    }
}

然后生成实例,等于调用函数

 var people1 = People('jack',18);
 var people2 = People('lucy',17)

缺点:people1与people2之间没有内在联系,不能反映出它们是一个原型对象的实例

3.构造函数模式

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

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

生成实例对象

var people1 = new People('jack',18);
var people2 = new People('lucy',17);
alert(people1.name);    //jack
alert(people1.age);     //18

people1和people2会自动含有一个constructor属性,指向它们的构造函数

alert(people1.constructor == People); //true
alert(people2.constructor == People); //true

4.构造函数模式的问题

构造函数存在一个浪费内存的问题

function People(name,age) {
    this.name = name;
    this.age = age;
    this.job = 'web';
    this.say = function(){
        alert('你好')
    }
}

生成实例

var people1 = new People('jack',18);
var people2 = new People('lucy',17);
alert(people1.job);    //web
people1.say();     //你好

这样有一个弊端,对于每一个实例对象,job属性和say()方法都是一样的内容,每一次生成一个实例,都是重复的内容,多占内存。

alert(people1.say == people2.say); //false

5.Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

function People(name,age) {
    this.name = name;
    this.age = age
}
People.prototype.job = 'web';
People.prototype.say = function(){
    alert('你好')
}

生成实例

var people1 = new People('jack',18);
var people2 = new People('lucy',17);
alert(people1.job);    //web
people1.say();     //你好

这时所有的job属性和say()方法都是同一个内存地址

posted @ 2018-09-05 19:00  妖色调  阅读(338)  评论(0编辑  收藏  举报