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
2、泛型中extends和super的区别 3、内部类的理解 4、深入理解Java的反射机制 5、深入理解Java异常体系 6、谈谈NIO的理解 7、谈一谈对JUC的理解 8、ArrayList的底层原理 9、HashMap的底层原理 10、Java单例模式详解 ...
JS是一种基于对象的语言，要实现面向对象，写法跟传统的面向对象有很大的差异。ES6引入了Class语法糖，使得JS的继承更像面向对象语言的写法。 此篇博客，分为：基本介绍、Vue使用案例 基本介绍 Class可以通过extends...
本文实例讲述了ES6 javascript中Class类继承用法。分享给大家供大家参考，具体如下： 1. 基本用法 Class 之间可以通过extends关键字实现继承， 这比 ES5 的通过修改原型链实现继承， 要清晰和方便很多。 class ...
public class Chicken extends Animal{ public void makeSound(){ System.out.println( "咯咯咯" ); } } public class Duck extends Animal{ public void makeSound(){ System.out.println( "嘎嘎嘎" ); } } A
php登录超时检测功能实例详解 前言： php登录超时问题，当用户超过...class Main extends Controller{ protected $request; public function _initialize(){ $this->request = \think\Request::instance(); } pu
自从有了ES6的继承后，ES5的继承也退出了舞台，在实际开发也不会用得着，但在面试或许用的着； 先看看ES6的继承 class Father{ constructor(a){ console.log(a);... class Son extends Father{ constructor(){
代码示例 namespace frontend\assets; use yii\web\AssetBundle; /** * Main frontend application asset bundle. */ class AppAsset extends AssetBundle ... public $basePath = '@webroot';... public $js =
export default class Bundle extends React.Component { state = { // short for module but that's a keyword in js, so mod mod: null } componentWillMount() { this.load(this.props) } co
最近在用vue的时候突然想到一个问题 首先，我们知道vue实现的单页应用中一般不会去刷新页面，因为刷新之后页面中的vuex数据就不见了...export class HTML5History extends History { ... push (location: RawLocatio
将valtio添加到.eslintrc配置文件的extends部分。 { " extends " : [ " plugin:valtio/recommended " ] } 您可以启用规则以激活插件。 { " rules " : { " valtio/state-snapshot-rule " : " warn " } }
包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些组件，router文件夹是配置路由用的。 按照顺序来写：detail文件夹下的代码 ...
背景 在自定义Egg.js的请求级别日志这篇文章中，我们实现了自定义请求级别的...class AppController extends app.Controller { async first() { this.ctx.swLog.info('in controller'); await this.ctx.render('
JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default class Cpn extends Vue{ counter = 0 //data add(){ //methods this.counter += 1 } } TS class写法 @...
路由参数 假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？ 这种场景就需要用到路由的参数功能，增加一条包含参数的路由...class List extends React.
public class HelloServlet extends HttpServlet { 只要在Servlet上设置@WebServlet标注，容器就会自动读取当中的信息。上面的@WebServlet告诉容器，如果请求的URL是“/hello.view”，则由HelloSer
import org.apache.struts.action.*;... public class TagForm extends ActionForm { private int id; private String userName; private String password; private int sex; private String[] hobbies; private
float 32bit, 9位有效数字，含小数(四舍五入)(小数点算一位，正负号不算) double 64bit, 18位有效数字 注：float 和 double 的小数部分不可能精确，只能近似。 比较小数时，用 double i=0.01; if ( i - 0.01 ...