1、基于原型链的方式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* js实现继承的第一种方式是基于原型链的方式
*/
function Parent() {
this.pv = "parent";
}
Parent.prototype.pp = "ok";
Parent.prototype.showParentValue = function() {
alert(this.pv);
}
function Child() {
this.cv = "child";
}
/**
* 如果想进行赋值之后，才进行原型链的设定，这样赋值的原型对象
* 就会被重写掉，赋值的对象就不存在在新的原型对象中
*/
// Child.prototype.showChildValue = function() {
// alert(this.cv);
// }
/**
* 让Child的原型链指向Parent对象，也就等于完成了一次继承
* 注意内存模型
*/
Child.prototype = new Parent();
Child.prototype.showChildValue = function() {
alert(this.cv);
}
/**
* 此时完成的对父类对象的覆盖
*/
Child.prototype.showParentValue = function() {
alert("override parent");
}
/**
* 在使用原型链进行继承一定要注意一下问题：
* 1、不能在设定了原型链之后，再重新为原型链赋值
* 2、一定要在原型链赋值之后才能添加或者覆盖方法
*/
/**
* 当执行了下面这句话之后，意味着Child的原型又重写了
* 这样就不存在任何的继承关系了
* 使用原型链需要注意的第一个问题
*/
// Child.prototype = {
// showChildValue:function() {
// alert(this.v);
// }
// }
var c = new Child();
c.showParentValue();
c.showChildValue();
alert(c.pp);
</script>
</head>
<body>
</body>
</html>
以下内存模型图分析
2、基于原型链的方式问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* js实现继承的第一种方式是基于原型链的方式
*/
function Parent() {
this.pv = "parent";
this.color = ["red","yellow"];
}
Parent.prototype.pp = "ok";
Parent.prototype.showParentValue = function() {
alert(this.pv);
}
function Child() {
this.cv = "child";
}
/**
* 使用原型链继承，最大的缺点是，无法从子类中调用父类的构造函数
* 这样就没有办法把子类中的属性赋值到父类
* 第二个缺点就是，如果父类中有引用类型，此时这个引用类会添加到
* 子类的原型中，当第一个对象的修改了这个引用之后，其他对象的引用同时修改
* 所以一般都不会单纯的使用原型链来实现继承
*/
Child.prototype = new Parent();
Child.prototype.showChildValue = function() {
alert(this.cv);
}
/**
* 此时完成的对父类对象的覆盖
*/
Child.prototype.showParentValue = function() {
alert("override parent");
}
var c1 = new Child();
//Child中的原型的color被修改
c1.color.push("blue");
alert(c1.color);//red,yellow blue
var c2 = new Child();
alert(c2.color);//red yellow blue
</script>
</head>
<body>
</body>
</html>
3、call或apply伪造方式实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function Parent() {
this.color = ["red","blue"];
this.name = "Leon";
}
function Child() {
//在Child中的this明显应该是指向Child的对象
//当调用Parent方法的时候，而且this又是指向了Child
//此时就等于在这里完成this.color = ["red","blue"]
//也就等于在Child中有了this.color属性，这样也就变相的完成了继承
Parent.call(this);
//这种调用方式，就仅仅完成了函数的调用，根本无法实现继承
//Parent();
}
var c1 = new Child();
c1.color.push("green");
alert(c1.color); //red,blue,green
var c2 = new Child();
alert(c2.color); //red,blue
alert(c2.name); //Leon
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function Parent(name) {
this.color = ["red","blue"];
this.name = name;
}
function Child(name,age) {
this.age = age;
/*
* 使用伪造的方式就可以把子类的构造函数参数传递到
* 父类中
*/
Parent.call(this,name);
}
var c1 = new Child("Leon",12);
var c2 = new Child("Ada",22);
alert(c1.name+","+c1.age); //Leon,12
alert(c2.name+","+c2.age); //Ada,22
</script>
</head>
<body>
</body>
</html>
4、call或apply伪造方式实现的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function Parent(name) {
this.color = ["red","blue"];
this.name = name;
this.say = function() {
alert(this.name);
}
}
/**
* 由于使用伪造的方式，不会完成Child的原型指向Parent
* 所以say方法不存在，解决方法是，将这个方法放置到
* Parent中使用this来创建，但是此时每个对象中又存在say
* 这样空间占用太大，所以也不会单独的使用伪造的方式实现继承
*/
/* Parent.prototype.say = function() {
alert(this.name);
} */
function Child(name,age) {
this.age = age;
/*
* 使用伪造的方式就可以把子类的构造函数参数传递到
* 父类中
*/
Parent.call(this,name);
}
var c1 = new Child("Leon",12);
var c2 = new Child("Ada",22);
c1.say();
c2.say();
</script>
</head>
<body>
</body>
</html>
5、通过组合的实现方式来解决两种方式的问题(组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现
* 注意内存模型
*/
function Parent(name) {
this.color = ["red","blue"];
this.name = name;
}
Parent.prototype.ps = function() {
alert(this.name+"["+this.color+"]");
}
function Child(name,age) {
//已经完成了伪造
Parent.call(this,name);
this.age = age;
}
Child.prototype = new Parent();
Child.prototype.say = function() {
alert(this.name+","+this.age+"["+this.color+"]");
}
var c1 = new Child("Leon",22);
c1.color.push("green");
c1.say();
c1.ps();
var c2 = new Child("Ada",23);
c2.say();
c2.ps();
</script>
</head>
<body>
</body>
</html>
以下是内存模型图分析
相关推荐
ES6 类(Class)的继承(extends)和自定义存(setter)取值(getter)详解，博客地址： http://blog.csdn.net/pcaxb/article/details/53784309
### JavaScript开发之JS压缩技术详解 #### 一、引言 在JavaScript开发过程中，随着项目的不断扩展和功能的增加，JavaScript文件的数量与体积往往会变得非常庞大。这不仅增加了页面加载的时间，也消耗了大量的网络...
**Node.js-Swig模板引擎详解** Node.js是一个强大的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。Swig则是Node.js中的一个优秀的、简洁的模板引擎，它以其易于理解和使用的特性，受到了广大...
### React国际化react-i18next详解 #### 一、引言 随着全球化的发展，软件产品的用户群体变得越来越多样化。为了更好地服务于全球用户，实现多语言支持成为开发过程中的一个重要环节。React作为当下流行的前端框架...
在JavaScript中，继承是面向对象编程的一个核心...随着JavaScript语言的发展，后来的ES6引入了更现代的继承机制，如`class`关键字和`extends`关键字，但Prototype.js的实现对理解JavaScript的继承概念仍然很有帮助。
在Vue.js中，`extend`、`component`、`mixins`和`extends`都是用于组合和重用组件逻辑的关键工具。理解它们的区别对于构建高效且可维护的应用至关重要。 首先，`new Vue()`是初始化一个新的Vue实例，它接受一个选项...
##### JavaScript (script.js) ```javascript document.addEventListener('DOMContentLoaded', function () { const greeting = document.getElementById('greeting'); greeting.addEventListener('click', ...
JavaScript是一种广泛应用于Web开发的动态编程语言，尤其在构建交互式网页和富互联网应用程序时扮演着重要角色。在JavaScript中，面向对象编程（Object-Oriented Programming，简称OOP）是一种核心特性，它允许...
JavaScript中的继承是面向对象编程的重要概念，允许子类继承父类的属性和方法。本文将深入探讨JavaScript继承的实现方式，以及其中的问题和解决方案。 首先，我们来看混合方式的实现，这种方式结合了原型链和对象...
#### 四、数据库操作知识点解析 **SQL查询与更新** - **题目解析**：本题考查SQL查询与更新。 - **知识点详解**： - 使用`SELECT`语句查询B表中`docid='A0011'`的记录。 - 使用`UPDATE`语句更新A表中匹配的记录...
首先，我们要知道React是一个用于构建用户界面的JavaScript库，而Three.js则是一个3D库，它提供了丰富的功能来创建三维图形和交互式体验。将两者结合，我们可以为用户创建一个沉浸式的720度全景图像浏览体验。 **一...
在JavaScript ES6中，引入了类（Class）的语法，这是一种更加面向对象的代码书写方式，使得JavaScript在保持其灵活性的同时，与Java、PHP等传统后端语言的面向对象编程风格更加接近。以下是对ES6类语法的详细解析： ...
ES6，即ECMAScript 6，是JavaScript语言的一个主要更新版本，提供了许多新的语法特性，其中之一就是引入了类（class）的概念。在此之前，JavaScript中模拟类主要通过原型链来实现，而ES6中的class为面向对象编程...
## React 国际化插件 react-i18n-auto 使用详解 React-i18n-auto 是一个专为React应用设计的国际化插件，它简化了中文国际化的自动化流程，使得在快速迭代开发中处理多语言支持变得更加便捷。本文将详细介绍如何...
在JavaScript的世界里，jQuery库提供了许多实用的工具函数，其中`jQuery.extend`就是一个非常重要的功能，用于对象的合并与扩展。本文将深入解析`jQuery.extend`的工作原理和应用场景。 首先，`jQuery.extend`的...
Vue.js 是一款流行的前端框架，它提供了一些强大的功能来帮助开发者构建复杂的Web应用程序。在Vue中，`mixins`和`extends`是两种用于组件复用和组合的关键特性。它们都可以被视为一种继承机制，但各自有不同的特点和...
ESLint是一个广泛使用的JavaScript代码质量检测工具，它旨在帮助开发者发现并修复代码中潜在的问题。ESLint在2013年由Nicholas C. Zakas创建，并使用Node.js编写。其核心理念是允许开发者定义一套适合自己项目的代码...