`

JS_继承

 
阅读更多

 1、原型链,假如我们让原型对象指向另一个类型的实例,此时,原型对象包含指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型有事另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。

function SuperType() {
	this.property = true;
}
SuperType.prototype.getSuperValue = function() {
	return this.property;
}
function SubType() {
	this.subProperty = true;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
	return this.subProperty;
}
var instance = new SubType();
document.write("instance.getSuperValue(): " + instance.getSuperValue());
document.write("<br>");
document.write("instance instanceof Object: " + (instance instanceof Object));
document.write("<br>");
document.write("instance instanceof SuperType: " + (instance instanceof SuperType));
document.write("<br>");
document.write("instance instanceof SubType: " + (instance instanceof SubType));
document.write("<br>");
document.write("Object.prototype.isPrototypeOf(instance): " + Object.prototype.isPrototypeOf(instance));
document.write("<br>");
document.write("SuperType.prototype.isPrototypeOf(instance): " + SuperType.prototype.isPrototypeOf(instance));
document.write("<br>");
document.write("SubType.prototype.isPrototypeOf(instance): " + SubType.prototype.isPrototypeOf(instance));
document.write("<br>");
//isPrototypeOf,只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。

 instance的prototype 指向了subType的原型,subType原型的prototype指向了SuperType的原型。此时的SubType.prototype.constructor实际是SuperType.prototype.constructor指针指向的对象即SuperType。instance.getSuperValue()会经过三个步骤:1)搜索instance实例2)搜索subType.prototype 3)搜索SuperType.prototype

 2、借用构造函数

function SuperType(name) {
	this.name = name;
}
function SubType(age) {
	SuperType.call(this, "zhangsan")
	this.age = age;
}
var instance = new SubType(12);
console.log("instance: ", instance);

 问题:1)代码复用性低2)在超类的原型中定义的方法在子类中不可见

 3、组合继承

function SuperType(name) {
	this.name = name;
}
SuperType.prototype.getSuperValue = function() {
	return this.name;
}
function SubType(age) {
	SuperType.call(this, "zhangsan")
	this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
	return this.age;
}
var instance = new SubType(12);
console.log("instance: ", instance);

 4、原型式eg.

function object(obj) {
	function F() {
	}
	F.prototype = obj;
	return new F();
}
var person = {
	name : "zhang",
	friends : [ "li" ]
};
// var p1 = object(person);
var p1 = Object.create(person, {
	address : {
		value : "beijing"
	}
});
p1.friends.push("shen");
console.log("p1: ", p1);
console.log("p1.friends: ", p1.friends);
var p2 = object(person);
p2.friends.push("shi");
console.log("p2.friends: ", p2.friends);

5、寄生组合式继承,eg.

function object(obj) {
	function F() {
	}
	F.prototype = obj;
	return new F();
}
function inheritPrototype(supType, subType) {
	var prototype = object(supType.prototype);
	prototype.constructor = subType;
	subType.prototype = prototype;
}
function SupType(name) {
	this.name = name
	friends = [ "li" ]
};
SupType.prototype.getSuperValue = function() {
	return this.name;
}
function SubType(name, age) {
	SupType.call(this, name);
	this.age = age;
};
inheritPrototype(SupType, SubType)
SubType.prototype.getSubValue = function() {
	return this.age;
}
var sub = new SubType();
console.log("sub: ", sub);

 

 

分享到:
评论

相关推荐

    JavaScript _ MDN_human5aa_js_

    "human5aa_js"可能是指一个专门针对初学者或对JavaScript感兴趣的人设计的学习路径或者教程系列。 JavaScript的核心概念包括变量、数据类型、控制流(条件语句和循环)、函数、对象和数组等。变量在JavaScript中是...

    js_.rar_.doc_javascript_js

    原型链则是JavaScript实现继承的主要方式,每个对象都有一个__proto__属性,指向其构造函数的原型对象。 文件名中的"www.pudn.com.txt"可能是一个链接或资源列表,通常在JavaScript学习过程中,开发者会参考各种...

    JavaScript设计模式与开发实践_himppf_js_jspremise_精通javascript_Js设计模式_

    "himppf"可能是作者或某个特定的代码风格指南,"jspremise"可能是指JavaScript的基础概念,"精通javascript"则强调了对这门语言的深入理解和熟练掌握,而"Js设计模式"则是我们讨论的重点。 JavaScript设计模式主要...

    JS:Call方法详解(js_的继承)

    ### JS:Call方法详解(js的继承) #### 一、Call 方法概述 在JavaScript中,`call`方法是一种非常强大的工具,它可以用来改变函数调用时的上下文环境。具体来说,`call`方法允许我们使用指定的对象作为函数内部的`...

    arcgis_js_v418_sdk.zip

    3. `arcgis_js_api`:这是SDK的核心代码库,包含了大量的JavaScript类和函数,开发者可以通过查阅这些源码了解API的底层实现和接口详情。 三、开发实例与应用场景 ArcGIS API for JavaScript 4.18广泛应用于地理...

    javascript_js教程

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,主要负责网页的动态交互。作为初学者,了解并掌握JavaScript的基础知识至关重要。中兴培训PPT中的内容可能涵盖以下核心概念: 1. **基础语法**:...

    javascript_js学习教程

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级、解释型编程语言,以其灵活性和交互性在网页设计中占据核心地位。此“javascript_js学习教程”是针对初学者精心设计的,来源于中兴通讯的内部培训资料,旨在...

    JS.rar_javascript_js制作网页_js网页特效

    JavaScript,简称JS,是Web开发领域中不可或缺的一部分,主要用于实现客户端的交互效果和动态功能。在网页设计中,JavaScript能够极大地提升用户体验,让静态的HTML页面变得生动有趣。本资源"JS.rar"包含了一系列...

    javascript 原生态js类继承实现的方式

    我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。

    JavaScript学习之三 — JavaScript实现继承的7种方式

    在JavaScript中,面向对象编程是实现复杂功能和代码复用的关键。继承是面向对象的核心特性之一,它...文章中的`inheritance.html`和`inheritance.js`文件可能包含示例代码,帮助你直观地了解每种继承方式的实现和使用。

    js javascript zInherit 对象 继承

    在JavaScript中,有多种实现继承的方法,包括原型链继承、构造函数继承、组合继承、寄生继承、原型式继承、共享原型等。`zInherit`是其中的一种自定义实现,它通常通过修改对象的原型(prototype)来实现继承关系。 ...

    js继承.doc

    JavaScript,作为一种基于原型的面向对象语言,其继承机制与传统的类继承有所不同。在JS中,对象可以直接通过原型链实现继承,而无需像Java那样使用`extends`关键字。本文档将探讨JavaScript中的继承实现方式及其优...

    JS-.rar_DEMO_js_js demo_js的demo

    在“JS-.rar_DEMO_js_js demo_js的demo”这个压缩包中,包含的是大量的JavaScript示例代码和相关资料,这些资源对于学习和理解JavaScript的基本语法、函数、对象、DOM操作、事件处理等核心概念非常有帮助。...

    JavaScript继承

    除了传统的原型链继承,JavaScript还支持其他继承模式,如组合继承(组合使用构造函数和原型链)、寄生继承(通过创建父类副本改进继承)、原型式继承(使用`Object.create()`)、寄生组合式继承(被认为是最有效的...

    js_api_reference.rar_javascript

    2. **对象和原型**:JavaScript是一种基于原型的语言,这意味着对象可以继承其他对象的属性和方法。这包括了原型链、构造函数、Object.create()、以及ES6引入的类(class)概念。 3. **数组和集合**:JavaScript提供...

    JS封装和继承-入门级

    5. **寄生组合式继承**:结合了寄生式继承和组合继承的优点,是JavaScript中推荐的继承方式,可以在`Javascript面向对象编程(三):非构造函数的继承.docx`中找到更详细的解释。 例如,使用寄生组合式继承: ```...

    JS_is_JS(程劭非)

    2. **对象和原型链**:JavaScript中的对象是其核心特性,基于原型的继承机制使得代码可复用性增强。书中可能详细解析了如何创建和操作对象,以及理解原型链和`__proto__`、`prototype`的区别。 3. **闭包**:闭包是...

    JS继承的实现方式

    ### JS继承的实现方式 JavaScript作为一种灵活且功能强大的编程语言,支持多种继承模式。下面将详细介绍几种常见的继承实现方式,并探讨它们的特点与应用场景。 #### 一、原型链继承 **核心思想**: 将父类的实例...

    Javascript(OOP).rar_javascript_javascript O_oop javascript

    本文档深入探讨了JavaScript中的面向对象特性,包括类、对象、继承、封装和多态性。 在JavaScript中,面向对象主要通过构造函数和原型链实现。构造函数是一种特殊的函数,用于创建和初始化对象。当你使用`new`...

    js继承的用法

    根据提供的文件信息,我们可以分析并总结出关于JavaScript继承的一些关键知识点。尽管提供的代码示例主要关注于使用jQuery插件初始化一个表格(grid),但这里我们将重点放在如何在JavaScript中实现继承这一主题上。...

Global site tag (gtag.js) - Google Analytics