JavaScript原型面向对象构造

最新推荐文章于 2024-10-17 09:40:47 发布

zqjflash

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量724

点赞数

分类专栏： web前端-js篇文章标签： web开发 javascript 面向对象面向对象编程 interface

web前端-js篇专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1 封装

先使用构造函数声明一个类，在构造函数中给this添加本地属性，并实例化一个对象，这种方式可以为对象声明一个公共的本地属性：

function Animal(name) {

this.name = name;

this.sleep = function() {

alert(this.name + ' sleep');

};

}

var a1 = new Animal('不高兴');

a1.sleep();

Note:类名为Animal，使用大写字母开头，是编程的一种命名约定。

使用prototype也可以实现：

function Animal(name) {

this.name = name;

}

Animal.prototype.sleep = function() {

alert(this.name + ' sleep');

};

var a1 = new Animal("不高兴");

a1.sleep();

但是，两种声明公共属性/方法的方式是有区别的，使用hasOwnProperty()方法可以用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性，后面详细说明本地属性与prototype属性的关系。

在执行构造函数和a1对象方法调用时，this变量会绑定到a1对象，在这里就不具体说明this了。

私有属性有一种命名约定以下划线（_）作为开头，一般在看到这种命名约定时，就应当想到，这是对象的一个私有属性，不应该随意修改，如：

function Animal(name) {

this._isMammal = true;

this.name = name;

}

Animal.prototype._frenzy = function() {

};

3.2继承

继承分为接口继承与实现继承，因为JavaScript没有接口（interface）的概念，所以无法实现接口继承。

看下面一段代码：

function Aniaml() {

alert('Animal init');

}

Animal.prototype.sleep = function() {

alert('Animal sleep');

};

var a1 = new Animal(); //alert Animal init

a1.sleep(); //alert Animal sleep

上面这段代码声明了一个Animal类，我现在想声明一个Cat类并继承它，该如何做呢？

function Cat() {

alert('Cat init');

}

Cat.prototype = Animal.prototype;

Cat.prototype.sleep = function() {

alert('Cat sleep');

};

var c2 = new Cat(); //alert Cat init

c2.sleep(); //alert Cat sleep

a1.sleep(); //alert Cat sleep,这时候a1也输出了Cat sleep

上面这么写很显然是有问题的，这么写会使Cat.prototype与Animal.prototype引用相同对象，修改Cat.prototype的属性值会影响到Animal.prototype。那么，换一种写法：

function Cat() {

alert('Cat init');

}

Cat.prototype = new Animal();

似乎也有问题，在给Cat.prototype属性赋值时，会实例化Animal。我们只是希望继承Animal.prototype，并不希望执行Animal的构造函数。这时候，我们可以利用一个空对象作为中介，实现对Animal的原型继承：

function Cat() {

alert('Cat init');

}

function Empty() {}

Empty.prototype = Animal.prototype;

Cat.prototype = new Empty();

Cat.prototype.constructor = Cat;

Cat.prototype.sleep = function() {

alert('Cat sleep');

};

var c2 = new Cat(); // alert Cat init

c2.sleep(); //alert Cat sleep

a1.sleep(); //alert Animal sleep

总算一切正常，现在我们来重新组织下Animal与Cat的原型链：

将继承的方法封装成一个公共函数：

var TemplateClass = function() {};

function chain(object) {

TemplateClass.prototype = object;

var result = new TemplateClass();

TemplateClass.prototype = null;

return result;

}

写一个完整的原型继承例子，这个例子将会描述如何调用父类（super class）的方式

function Animal(name, color) {

this.name = name;

this.color = color;

}

Animal.prototype.sleep = function() {

alert(this.name + ' sleep');

};

var a1 = new Animal('倒霉熊', 'white');

a1.sleep(); //倒霉熊 sleep

function Cat() {

//通过调用父类的构造函数实现初始化

Animal.apply(this, arguments);

}

Cat.prototype = chain(Animal.prototype);

Cat.prototype.constructor = Cat;

Cat.prototype.greenEye = true;

Cat.prototype.mew = function() {

alert(this.name + ' mew');

};

var c2 = new Cat('没头脑', 'red');

c2.mew(); //没头脑 mew

c2.sleep(); //没头脑 sleep

alert(c2.greenEye); //true

function PersianCat() {

Cat.apply(this, arguments);

}

PersianCat.prototype = chain(Cat.prototype);

PersianCat.prototype.constructor = PersianCat;

PersianCat.prototype.name = 'persian cat'; //在原型中声明name属性

PersianCat.prototype.blueEye = true;

PersianCat.prototype.mew = function() {

//重写方法并不一定要完全覆写，也可以调用父类方法，执行父类细节之后实现更多细节

Cat.prototype.mew.call(this);

alert(this.name + ' miaow');

};

var p3 = new PersianCat('不高兴', 'yellow');

p3.mew(); // 不高兴mew, 不高兴miaow

p3.sleep(); //不高兴 sleep

alert(p3.greenEye); //true

alert(p3.blueEye); //true

alert(p3.__proto__.name); //输出persian cat，本地name属性赋值之后，并不会覆盖prototype中name属性的值

下面通过一个更详细的原型链图，来描述这个例子中本地属性与prototype属性之间的关系：

通过这个图，大家应该也看明白，a1、c2、p3中的是本地属性，其他的都是prototype属性，从例子的运行结果可以知道，对本地属性赋值，并不会覆盖prototype属性。在使用this访问对象的属性或方法时，是先从本地属性中查找，如果未到，那么它会向上遍历原型链，直到找到给定名称的属性为止，当到达原型链的顶部（也就是Object.prototype）仍然没有找到指定的属性，就会返回undefined。

chain()函数也可以使用Object.create()函数替代，可以简单的理解成Object.create()完成的工作与chain()一样。这样可以对上面例子的代码再优化，将类继承封装成一个独立函数：

var TemplateClass = function() {},

chain = Object.create || function(object) {

TemplateClass.prototype = object;

var result = new TemplateClass;

TemplateClass.prototype = null;

return result;

};

function extend(SubClass, SuperClass, overrides) {

var subProto, name;

SuperClass = SuperClass || Object;

SubClass.prototype = chain(SuperClass.prototype);