首页 > 语言 > JavaScript > 正文

JavaScript编程中实现对象封装特性的实例讲解

2024-05-06 14:55:22
字体:
来源:转载
供稿:网友

1.prototype对象
1.1构造函数的缺点
JavaScript通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部。

function Cat (name, color) { this.name = name; this.color = color;}var cat1 = new Cat('大毛', '白色');cat1.name // '大毛'cat1.color // '白色'

上面代码的Cat函数是一个构造函数,函数内部定义了name属性和color属性,所有实例对象都会生成这两个属性。但是,这样做是对系统资源的浪费,因为同一个构造函数的对象实例之间,无法共享属性。

function Cat(name, color) { this.name = name; this.color = color; this.meow = function () { console.log('mew, mew, mew...'); };}var cat1 = new Cat('大毛', '白色');var cat2 = new Cat('二毛', '黑色');cat1.meow === cat2.meow// false

上面代码中,cat1和cat2是同一个构造函数的实例。但是,它们的meow方法是不一样的,就是说每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源,因为所有meow方法都是同样的行为,完全应该共享。

1.2 prototype属性的作用
在JavaScript语言中,每一个对象都有一个对应的原型对象,被称为prototype对象。定义在原型对象上的所有属性和方法,都能被派生对象继承。这就是JavaScript继承机制的基本设计。

除了这种方法,JavaScript还提供了另一种定义实例对象的方法。我们知道,构造函数是一个函数,同时也是一个对象,也有自己的属性和方法,其中有一个prototype属性指向另一个对象,一般称为prototype对象。该对象非常特别,只要定义在它上面的属性和方法,能被所有实例对象共享。也就是说,构造函数生成实例对象时,自动为实例对象分配了一个prototype属性。

function Animal (name) { this.name = name;}Animal.prototype.color = "white";var cat1 = new Animal('大毛');var cat2 = new Animal('二毛');cat1.color // 'white'cat2.color // 'white'

上面代码对构造函数Animal的prototype对象,添加了一个color属性。结果,实例对象cat1和cat2都带有该属性。

更特别的是,只要修改prototype对象,变动就立刻会体现在实例对象。

Animal.prototype.color = "yellow";cat1.color // 'yellow'cat2.color // 'yellow'

上面代码将prototype对象的color属性的值改为yellow,两个实例对象的color属性的值立刻就跟着变了。这是因为实例对象其实没有color属性,都是读取prototype对象的color属性。也就是说,当实例对象本身没有某个属性或方法的时候,它会到构造函数的prototype对象去寻找该属性或方法。这就是prototype对象的特殊之处。

如果实例对象自身就有某个属性或方法,它就不会再去prototype对象寻找这个属性或方法。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选