欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 中的面向对象编程

程序员文章站 2022-05-25 20:41:45
...

(一)封装

JavaScript中没有类的概念,但可以通过function来“模拟”类,从而创建具有相同属性和方法的对象。

1. 通过构造函数模式来创建“类”

内部使用this变量,当使用new创建类的实例后,this便指向了创建的新对象。

function Person(name,color){
    this.name = name;
    this.age = age;
    this.type = "human";
    this.sayHi = function(){
        alert("hello");
    }
}
var p1 = new Person("hxj",20);
p1.sayHi();
使用构造函数的缺点:在创建每一个实例时,每个属性和方法都要重新创建一遍,这就造成了内存的浪费。因此,针对一些共有的属性(如:type)和方法(如:sayHi()),可以定义在函数的原型对象上,让所有的实例共享这些属性和方法。

2. 原型模式(prototype模式)

js中,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的的所有属性和方法可供构造函数的所有实例共享。这样,就可以将共有属性和方法定义在prototype对象上。

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.type = "human";
Person.prototype.sayHi = function(){alert("hello");}
说明:所有实例的type属性和sayHi()方法,都来自同一个prototype对象。

(二)继承

1. 构造函数、prototype和实例的关系

每个构造函数都有一个prototype属性,指向prototype对象;prototype对象包含指向构造函数的指针,实例也包含指向prototype对象的指针。

JavaScript 中的面向对象编程

2. 原型链实现继承

思想:让一个构造函数的prototype对象等于另一个类A的实例,此时的prototype对象将包含指向类A的prototype对象的指针。假如,类A的prototype对象又等于另一个类B的实例,如此下去就构成了实例和原型的链条,称为原型链。

JavaScript 中的面向对象编程

function Supertype(){
    this.property = true;
}
Supertype.prototype.getSuperVal = function(){
    return this.property;
}
function Subtype(){
    this.subproperty = flase;
}
Subtype.prototype.getSubVal = function(){
    return this.subproperty;
}
Subtype.prototype = new Supertype();//Subtype继承了Supertype,此时Subtype.prototype对象的constructor指向Supertype
Subtype.prototype.constructor = Subtype;//将Subtype.prototype对象的constructor指向Subtype
var instance  = new Subtype();

说明:1. 该原型链的最前端少一环,因为所有的引用类型都继承自Object,所有函数的默认原型都是Object的实例,因此Supertype的[[prototype]]指向Object prototype对象。

2. Supertype中的property属性并不在Supertype.prototype中,是一个实例属性,因此位于Subtype.prototype中。

未完待续。。。