JavaScript继承(1)
来源:互联网 发布:java增删改查代码学生 编辑:程序博客网 时间:2024/06/15 17:14
1、子类的原型对象–类式继承
//声明父类 function SuperClass() { this.superValue = true; } //为父类添加共有方法 SuperClass.prototype.getSuperValue = function () { return this.superValue; } //声明子类 function SubClass() { this.subValue = false; } //继承父类 SubClass.prototype = new SuperClass(); //为子类添加共有方法 SubClass.prototype.getSubValue = function () { return this.subValue; } var instance = new SubClass(); console.log(instance.getSuperValue());//true console.log(instance.getSubValue());//false
简单理解
类式需要先声明两个类,并将第一类的实例赋值给第二个类的原型。
我们实例化一个父类的时候,新创建的对象复制了父类的属性和方法并且将原型指向了父类的原型对象。新创建的对象可以访问到父类原型上的属性和方法与从父类构造函数中复制的属性和方法。
2个缺点
1、 某个子类的实例更改子类原型从父类构造函数中继承来共有属性,就会直接影响其他子类。
2、子类实现的继承是靠原型对父类的实例化实现的,因此创建父类的时候,是无法传递参数以及对父类构造函数初始化。
2、创建即继承–构造函数继承
//构造函数式继承 //声明父类 function SuperClass(id) { //引用类型共有属性 this.books = ['JavaScript', 'HTML', 'CSS']; //值类型共有属性 this.id = id; } //父类声明原型方法 SuperClass.prototype.showBooks = function () { console.log(this.books); } //声明子类 function SubClass(id) { //继承父类 SuperClass.call(this, id); } //创建实例 var instance1 = new SubClass(1); var instance2 = new SubClass(2); instance1.books.push('设计模式'); console.log(instance1.books);//["JavaScript", "HTML", "CSS", "设计模式"] console.log(instance1.id);//1 console.log(instance2.books);//["JavaScript", "HTML", "CSS"] console.log(instance2.id);//2 console.log(instance1.showBooks());//TypeError
简单理解
SuperClass.call(this, id);
这句话是构造函数继承的精华,由于call这个函数可以改变函数的作用环境,父类中的是this绑定的,因此在子类中自然也就继承了父类的属性。
缺点
父类的原型方法自然不会被子类继承,继承就要放在构造函数中。这样创造的实例都会单独拥有一份而不能共用,违背了代码复用的原则。
3、将优点为我所用–组合继承
//组合式继承 //声明父类 function SuperClass(name) { //引用类型共有属性 this.books = ['JavaScript', 'HTML', 'CSS']; //值类型共有属性 this.name = name; } //父类声明原型方法 SuperClass.prototype.getName = function () { console.log(this.name); } //声明子类 function SubClass(name, time) { //构造函数式继承父类 SuperClass.call(this, name); this.time = time; } //类式继承 SubClass.prototype = new SuperClass(); //子类声明原型方法 SuperClass.prototype.getTime = function () { console.log(this.time); } //创建实例 var instance1 = new SubClass("小红", "2016"); var instance2 = new SubClass("小绿", "2017"); instance2.books.push("设计模式"); instance1.getName();// 小红 instance2.getTime();// 2017 console.log(instance1.books);// ["JavaScript", "HTML", "CSS"] console.log(instance2.books);// ["JavaScript", "HTML", "CSS", "设计模式"]
简单分析
组合继承就是将前两种方法综合到一起,在子类构造函数中执行父类构造函数,在子类原型上实例化父类。融合了优点,过滤缺点。
缺点
父类构造函数执行了2次。
其余继承方法,下次分享~
0 0
- JavaScript 继承详解1
- javascript继承总结(1)
- javascript 类继承1
- JavaScript继承1
- JavaScript继承详解1
- 【JavaScript】难点1-继承
- JavaScript继承(1)
- JavaScript继承方式(1)
- JavaScript继承方式(1)
- JavaScript基础之继承1
- JavaScript的继承(1)
- javascript原型继承(1)
- javascript原型继承(1)
- javascript继承
- javascript继承
- javascript 继承
- Javascript继承
- Javascript继承
- 安装完jekyll还需要安装的东西
- Java时间格式对照表
- JavaScript-修改this指针
- Android ArrayAdapter的使用
- ArrayList源码分析
- JavaScript继承(1)
- PHP学习路线、书单
- 优秀到不能被忽视
- 虚拟机操作(root密码, Tools,SSH,samba,vim配置)
- 暴力程序心得
- MySQL 存储过程 创建 查看 调用 删除
- 开源数据库中间件对比
- python基础 之 对象销毁(垃圾回收)
- HDU 2602 Bone Collector