原型
原型是 JavaScript 面向对象特性中重要的概念,也是大家太熟悉的概念。因为在绝大多
数的面向对象语言中,对象是基于类的(例如 Java 和 C++ ) ,对象是类实例化的结果。而在
JavaScript 语言中,没有类的概念
① ,对象由对象实例化。打个比方来说,基于类的语言中类
就像一个模具,对象由这个模具浇注产生,而基于原型的语言中,原型就好像是一件艺术品
的原件,我们通过一台 100% 精确的机器把这个原件复制出很多份。
前面小节的例子中都没有涉及原型,仅仅通过构造函数和 new 语句生成类,让我们看
看如何使用原型和构造函数共同生成对象。
function Person() {}
Person.prototype.name = ‘BYVoid’;
Person.prototype.showName = function() {
console.log(this.name);
};
var person = new Person();
person.showName();
上面这段代码使用了原型而不是构造函数初始化对象。 这样做与直接在构造函数内定义
属性有什么不同呢?
**构造函数内定义的属性继承方式与原型不同, 子对象需要显式调用父对象才能继承构
造函数内定义的属性。
构造函数内定义的任何属性, 包括函数在内都会被重复创建, 同一个构造函数产生的
两个对象不共享实例。**
构造函数内定义的函数有运行时闭包的开销, 因为构造函数内的局部变量对其中定义
的函数来说也是可见的。
下面这段代码可以验证以上问题:
function Foo() {
var innerVar = ‘hello’;
this.prop1 = ‘BYVoid’;
this.func1 = function() {
innerVar = ”;
};
}
Foo.prototype.prop2 = ‘Carbo’;
Foo.prototype.func2 = function() {
console.log(this.prop2);
};
var foo1 = new Foo();
var foo2 = new Foo();
console.log(foo1.func1 == foo2.func1); // 输出 false
console.log(foo1.func2 == foo2.func2); // 输出 true
尽管如此,并不是说在构造函数内创建属性不好,而是两者各有适合的范围。那么我们
什么时候使用原型,什么时候使用构造函数内定义来创建属性呢?
**除非必须用构造函数闭包,否则尽量用原型定义成员函数,因为这样可以减少开销。
尽量在构造函数内定义一般成员, 尤其是对象或数组, 因为用原型定义的成员是多个
实例共享的。**
接下来,我们介绍一下JavaScript中的原型链机制。
原型链
JavaScript 中有两个特殊的对象: Object 与 Function ,它们都是构造函数,用于生
成对象。 Object.prototype 是所有对象的祖先, Function.prototype 是所有函数的原
型,包括构造函数。我把 JavaScript 中的对象分为三类,
一类是用户创建的对象,
一类是构造函数对象,
一类是原型对象。
用户创建的对象,即一般意义上用 new 语句显式构造的对象。
构造函数对象指的是普通的构造函数,即通过 new 调用生成普通对象的函数。
原型对象特指构造函数 prototype 属性指向的对象。
这三类对象中每一类都有一个 proto 属性,它指向该对象的原型,从任何对象沿着它开始遍历都可以追溯到 Object.prototype 。
构造函数对象有 prototype 属性,指向一个原型对象,通过该构造函数创建对象时,被创建对象的 proto 属性将会指向构造函数的 prototype 属性。
原型对象有 constructor属性,指向它对应的构造函数。让我们通过下面这个例子来理解原型:
function Foo() {}
Object.prototype.name = ‘My Object’;
Foo.prototype.name = ‘Bar’;
var obj = new Object();
var foo = new Foo();
console.log(obj.name); // 输出 My Object
console.log(foo.name); // 输出 Bar
console.log(foo.proto.name); // 输出 Bar
console.log(foo.proto.proto.name); // 输出 My Object
console.log(foo.proto.constructor.prototype.name); // 输出 Bar
我们定义了一个叫做 Foo () 的构造函数,生成了对象 foo 。同时我们还分别给 Object和 Foo 生成原型对象。
下图解析了它们之间错综复杂的关系。
对象的复制
JavaScript 和 Java 一样都没有像C语言中一样的指针,所有对象类型的变量都是指向对
象的引用,两个变量之间赋值传递一个对象并不会对这个对象进行复制,而只是传递引用。
有些时候我们需要完整地复制一个对象,这该如何做呢? Java 语言中有 clone 方法可以实
现对象复制,但 JavaScript 中没有这样的函数。因此我们需要手动实现这样一个函数,一个
简单的做法是复制对象的所有属性:
Object.prototype.clone = function() {
var newObj = {};
for (var i in this) {
newObj[i] = this[i];
}
return newObj;
}
var obj = {
name: ‘byvoid’,
likes: [‘node’]
};
var newObj = obj.clone();
obj.likes.push(‘python’);
console.log(obj.likes); // 输出 [ ‘node’, ‘python’ ]
console.log(newObj.likes); // 输出 [ ‘node’, ‘python’ ]
上面的代码是一个对象浅拷贝(shallow copy)的实现,即只复制基本类型的属性,而
共享对象类型的属性。 浅拷贝的问题是两个对象共享对象类型的属性, 例如上例中 likes 属
性指向的是同一个数组。
实现一个完全的复制,或深拷贝(deep copy)并不是一件容易的事,因为除了基本数据
类型,还有多种不同的对象,对象内部还有复杂的结构,因此需要用递归的方式来实现:
Object.prototype.clone = function() {
var newObj = {};
for (var i in this) {
if (typeof(this[i]) == ‘object’ || typeof(this[i]) == ‘function’) {
newObj[i] = this[i].clone();
} else {
newObj[i] = this[i];
}
}
return newObj;
};
Array.prototype.clone = function() {
var newArray = [];
for (var i = 0; i < this.length; i++) {
if (typeof(this[i]) == ‘object’ || typeof(this[i]) == ‘function’) {
newArray[i] = this[i].clone();
} else {
newArray[i] = this[i];
}
}
return newArray;
};
Function.prototype.clone = function() {
var that = this;
var newFunc = function() {
return that.apply(this, arguments);
};
for (var i in this) {
newFunc[i] = this[i];
}
return newFunc;
};
var obj = {
name: ‘byvoid’,
likes: [‘node’],
display: function() {
console.log(this.name);
},
};
var newObj = obj.clone();
newObj.likes.push(‘python’);
console.log(obj.likes); // 输出 [ ‘node’ ]
console.log(newObj.likes); // 输出 [ ‘node’, ‘python’ ]
console.log(newObj.display == obj.display); // 输出 false
上面这个实现看起来很完美,它不仅递归地复制了对象复杂的结构,还实现了函数的深
拷贝。这个方法在大多数情况下都很好用,但有一种情况它却无能为力,例如下面的代码:
var obj1 = {
ref: null
};
var obj2 = {
ref: obj1
};
obj1.ref = obj2;
这段代码的逻辑非常简单,就是两个相互引用的对象。当我们试图使用深拷贝来复制
obj1 和 obj2 中的任何一个时,问题就出现了。因为深拷贝的做法是遇到对象就进行递归
复制,那么结果只能无限循环下去。对于这种情况,简单的递归已经无法解决,必须设计一
套**图论算法, 分析对象之间的依赖关系, 建立一个拓扑结构图, 然后分别依次复制每个顶点,
并重新构建它们之间的依赖关系**。
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>
分享到:
相关推荐
### 理解Javascript原型继承原理 #### 一、引言 在JavaScript中,原型继承是一种非常核心且独特的机制,它使得对象能够继承其他对象的属性和方法。本文旨在深入探讨这一机制,并通过具体的示例代码帮助读者更好地...
以上解释了JavaScript中原型链的工作原理和相关细节,包括构造函数、原型对象、__proto__属性、继承方法等关键概念。这些概念的掌握对于理解JavaScript面向对象编程模型至关重要。在实际开发过程中,利用原型链可以...
原型和原型链是JavaScript中极其重要的概念,它们构成了JavaScript中对象和继承的核心机制。通过理解和掌握这些概念,开发者可以更高效地利用JavaScript的强大功能来构建复杂的Web应用程序。此外,原型的灵活性也为...
// 原型链示例 console.log(a.__proto__.__proto__); // 函数A的原型对象,即Function.prototype console.log(a.__proto__.__proto__.__proto__); // 函数Function的原型对象,即Object.prototype console.log(a.__...
### JavaScript原型继承工作原理及实例详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。其独特的面向对象机制是通过原型继承来实现的,这种机制使得JavaScript能够灵活地...
通过上述示例和解释,我们可以清楚地看到JavaScript中原型和原型链的工作原理。在JavaScript中,每一个对象都有一个`__proto__`属性,指向它的原型对象。当我们创建一个新的对象时,这个对象会继承其构造函数`...
原型链是JavaScript实现对象继承的基础,它连接了一系列的对象,使得一个对象可以访问另一个对象的属性和方法。具体来说: 1. **原型对象默认指针**:每个函数都有一个`prototype`属性,这个属性指向了一个对象,这...
JavaScript的原型链是理解JavaScript对象继承机制的关键。在JavaScript中,每个对象都有一个内部属性`[[Prototype]]`,通常通过`__proto__`或`Object.getPrototypeOf()...这就是JavaScript原型链的基本工作原理和示例。
当一个对象试图访问某个属性或方法但自身未定义时,JavaScript引擎会沿着原型链向上查找,直至找到或到达原型链的末端(通常是`Object.prototype`)。 **2. 原型链** 原型链是由一系列通过`[[Prototype]]`属性连接...
### JavaScript核心原理:深入理解对象与原型链 #### 前言 JavaScript 是一门高度抽象、面向对象的语言,广泛应用于Web开发中。它的核心特性之一就是处理对象(Object)的能力。对象不仅构成了JavaScript的基础数据...
### JavaScript:对象与原型链教程 #### 一、概述 本教程旨在深入解析JavaScript中对象的概念及其核心机制——原型链。我们将从数据类型入手,逐步探索函数与作用域的细节,并重点讨论对象与属性的相关知识。 ###...
### 详解JS中的原型、原型对象与原型链 ...了解原型、原型对象和原型链的工作原理对于编写高效、可维护的JavaScript代码至关重要。掌握这些概念可以帮助开发者更好地设计类结构,利用继承等面向对象编程特性。
本文将深入探讨这些概念,并通过具体的代码示例来解释如何利用原型和原型链实现类的继承、封装等特性。 #### 原型对象的基本概念 在JavaScript中,每个函数都有一个`prototype`属性,这个属性是一个对象,用来存储...
这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一个js对象,除了自己设置的属性外,还会自动生成proto、...
JavaScript中的原型模式是一种实现面向对象编程(OOP)的关键机制,它基于原型继承,使得对象可以从其他对象那里获得属性和方法。...同时,理解原型链的工作原理对于编写健壮的JavaScript代码至关重要。
在原型链上,对象能够继承其原型对象的属性和方法。这个机制是理解JavaScript继承和原型链操作的关键。 要说明原型链的工作原理,我们可以从几个方面着手: 1. __proto__属性:所有JavaScript对象都具有一个__...
- **原型链**:JavaScript使用原型链来实现继承。每个对象都有一个内部属性[[Prototype]],指向其原型对象。当尝试访问一个对象的属性时,如果该对象自身没有这个属性,则会沿着原型链向上查找,直到找到该属性为止...
在提供的资源中,《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导,而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...