详细理解JS中的继承
- JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名)
- 所有对象都继承了Object.prototype上的属性和方法。
- 说继承之前还要再说一下原型。原型之所以很重要,原因之一就是可以利用它来实现JavaScript的继承。重写一个函数的原型对象,将其指定为另一个函数的实例,这样便实现了一个简单的原型链继承。
- function Super(){
- this.name='super';
- }
- Super.prototype.getName=function(){
- console.log(this.name);
- }
- function Sub(){
- this.name='sub';
- }
- Sub.prototype=new Super();//重写原型,实现继承
- var instance=new Sub();
- instance.getName();//sub继承了getName方法
重写原型会让Sub的原型获得Super构造函数上和Super原型上的所有属性和方法; 但是这样单纯使用原型来继承也有问题,比如将上面的代码修改一下,在原型上添加一个引用类型的属性:
- function Super() {
- this.name='super';
- }
- Super.prototype.getName=function() {
- console.log(this.name);
- };
- Super.prototype.color = ["red", "black"];
- function Sub() {
- }
- Sub.prototype=new Super();//实现继承
- var instance=new Sub();
- instance.color.push('white');//改变instance的color属性,push一个新的项
- var ins = new Sub();
- console.log(ins.color); //["red", "black", "white"] 可以看到ins的color属性也被改变了
- ① 借用构造函数(又叫经典继承,伪造对象)
- function Arr(){
- }
- Arr.prototype.array=['red','black'];
- arr01=new Arr();
- arr02=new Arr();
- arr01.array.push('white');
- console.log(arr02.array);//["red", "black", "white"]
- function superType(){
- this.color=['red','blue','yellow'];
- }
- function subType(){
- //继承了superType
- superType.call(this);
- }
- var instance01=new subType();
- instance01.color.push('black');
- console.log(instance01.color);//['red','blue','yellow','black']
- var instance02=new subType();
- console.log(instance02.color);//['red','blue','yellow']
借用构造函数这种方法主要就是:利用parent . call(this)来继承父级构造函数上公有的属性,且在一个实例上进行修改不会对其他实例造成影响;[ 注意:使用call这种不能继承原型上属性和方法的哦 ]
- ② 下面来说JS中最常用的继承模式:组合继承
- function superType(name){
- this.name=name;
- this.color=['red','blue','yellow'];
- }
- superType.prototype.sayName=function(){
- console.log(this.name);
- }
- function subType(name,age){
- //继承superType的属性
- superType.call(this,name);
- this.age=age;
- }
- //继承superType的方法
- subType.prototype=new superType();
- subType.prototype.constructor=subType;
- subType.prototype.sayAge=function(){
- console.log(this.age);
- };
- var instance01=new subType('lazy',20);
- instance01.color.push('black');
- console.log(instance01.color);//['red','blue','yellow','black']
- instance01.sayAge();//
- instance01.sayName();//lazy
- var instance02=new subType('chen',21);
- console.log(instance02.color);//['red','blue','yellow']
- instance02.sayAge();//
- instance02.sayName();//chen
superType.call(this,name);
- ③ 寄生组合式继承
- function superType(name){
- this.name=name;
- this.color=['red','blue','yellow'];
- }
- superType.prototype.sayName=function(){
- console.log(this.name);
- }
- function subType(name,age){
- //继承superType
- superType.call(this,name);
- this.age=age;
- }
- function inheritPrototype(sub,sup){
- //创建超类型构造函数的原型副本
- var prototype=Object(sup.prototype);
- //为其指定构造函数,增强对象
- prototype.constructor=sub;
- //重写sub的原型对象
- sub.prototype=prototype;
- }
- //copy一份超类型构造函数的原型对象给子类型构造函数
- inheritPrototype(subType,superType);
- subType.prototype.sayAge=function(){
- console.log(this.age);
- };
- var instance01=new subType('lazy',20);
- instance01.color.push('black');
- console.log(instance01.color);//['red','blue','yellow','black']
- instance01.sayAge();//
- instance01.sayName();//lazy
- var instance02=new subType('chen',21);
- console.log(instance02.color);//['red','blue','yellow']
- instance02.sayAge();//
- instance02.sayName();//chen
这种方法主要依然是利用 借用构造函数的方法来继承构造函数的属性,利用原型链的混合方法来继承方法;基本思路是:不必为了重写subType的原型而去调用一次superType,因为我们需要的也只是superType的原型对象的一个副本而已,所以有了inheritPrototype函数:
- function inheritPrototype ( sub ,super) {
- var prototype = Object( super.prototype ); //创建副本
- sub.prototype = prototype ;
- prototype . constructor = sub ;
- }
- ④寄生式继承 :在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种很有用的模式,看个例子:
- function createAnother(original) {
- var clone = Object(original);
- clone.sayHi = function () {
- console.log('hi');
- };
- return clone;
- }
- var person = {
- name: 'lazy',
- friends:[1,2,3]
- };
- var anotherPerson = createAnother(person);
- anotherPerson.sayHi();
- console.log(anotherPerson.name);
这个例子中,基于person对象创建了一个新的对象anotherPerson,这个新的对象不仅具有person的所有属性和方法,而且还有自己的sayHi方法;
菜鸟小白一枚,可能上述有错误或理解不对的地方,恳请指出~~谢谢!
详细理解JS中的继承的更多相关文章
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- 图文结合深入理解 JS 中的 this 值
图文结合深入理解 JS 中的 this 值 在 JS 中最常见的莫过于函数了,在函数(方法)中 this 的出现频率特别高,那么 this 到底是什么呢,今天就和大家一起学习总结一下 JS 中的 th ...
- 深入理解JS中的对象(三):class 的工作原理
目录 序言 class 是一个特殊的函数 class 的工作原理 class 继承的原型链关系 参考 1.序言 ECMAScript 2015(ES6) 中引入的 JavaScript 类实质上是 J ...
- 深入理解Js中的this
深入理解Js中的this JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及 ...
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- 如何更好的理解js中的this,分享2段有意思的代码
关于js中this的浅析,大家可以点击[彻底理解js中this的指向,不必硬背]这篇博客了解. 今天遇到2段比较有意思的代码. ----------------第一段----------------- ...
- JS中的继承(下)
JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...
随机推荐
- 11-jQuery简介和选择器
# jQuery > jQuery是一个是免费.开源的javascript库, 也是目前使用最广泛的javascript函数库.>> jQuery极大的方便你完成web前段的相关操作 ...
- NodeJS、npm安装步骤和配置(windows版本)
https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html 上面这个链接很详细了,怕它没了自己记一遍.我的简洁一点. 1. 打开no ...
- C# 模拟页面登录
using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...
- Kintex7XC7K325T板卡七仙女
- Taro -- 定义全局变量
Taro定义全局变量 方法1:在taro中 getApp()只能取到一开始定义的值,并不能取到改变后的值 // app.js文件中 class App extends Component { cons ...
- LINUX VSFTP配置及安装
------------------转载:亲身实践,确实好用(http://www.cnblogs.com/jack-Star/p/4089547.html) 1.VSFTP简介 VSFTP是一个基于 ...
- 02scikit-learn模型训练
模型训练 In [6]: import numpy as np import matplotlib.pyplot as plt from sklearn.linear_model import Lin ...
- keras 下载预训练模型报错SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:852)
import ssl ssl._create_default_https_context = ssl._create_unverified_context https://stackoverflow. ...
- bzoj5118 Fib数列2 二次剩余+矩阵快速幂
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5118 题解 这个题一看就是不可做的样子. 求斐波那契数列的第 \(n\) 项,\(n \leq ...
- IndexError: list index out of range的错误原因
第1种可能情况list[index]index超出范围 第2种可能情况list是一个空的 没有一个元素进行list[0]就会出现该错误 ————————————————版权声明:本文为CSDN博主「m ...