博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
3.面向对象的三大特征中的 “继承” 和继承的几种方式
阅读量:5167 次
发布时间:2019-06-13

本文共 4233 字,大约阅读时间需要 14 分钟。

学习继承之前,要先了解什么是面向对象:(把相同的代码提取(抽象)出来归为一类,把公共的方法挂在 这个类的原型上 的一种编程思想(开发模式))
>>原型和原型链,在,面向对象,的那个随笔分类里有细说。<<
面向对象的三大特征:抽象、封装、继承、(多态) 抽象:提取类似的部分。 封装:归类的过程。
继承:子类拥有父类的属性或者方法,自己也有自己的一套属性和方法。
/******************************** 下面开始这篇随笔的主题:继承 和 继承的几种方式********************************/ 网上对继承的方式,描述都不一样,主要是起的名字不一样,但这不重要,从代码的原理上大致可以分成4种,我给他们起来我心中的名字 注意: 1. call继承(属性继承/类式继承)     一般我们把属性放在类里面,方法挂在原型上。
调用父类,通过call来改变this(把window改成子类)     达到继承属性的目的。 例子:
function Person(name,age){        this.name = name;        this.age = age;    }    function Coder(name,age,job){        Person.call(this,name,age);        this.job = job;        // console.log(this);//Coder    }    let p = new Person('成龙',58);    let c = new Coder('房祖名',26,'演员');    console.log(c);//Coder {name: "房祖名", age: 26, job: "演员"}    console.log(p);//Person {name: "成龙", age: 58}

2.拷贝继承

原理:1.用  for  in 循环 Person.prototype,再复制给 Coder.prototype,这样Coder的实例 c 就可以使用 Person.prototype上的方法。

   2.再结合 call 继承属性,,此时就完成了 属性和方法 的继承。

注意:for in  会遍历整个原型链,(除了Person的原型,还会找Person的构造函数的原型。)为了保证只继承Person的方法,不包括 “祖先们” 的方法,此时需要用到

   hasOwnproperty() 这个方法类判断一下

缺点:会遍历整个原型链,性能消耗大

例子:

for(let attr in Person.prototype){        //必须保证赋值的数据是父级自身的属性        if(Person.prototype.hasOwnProperty(attr)){            Coder.prototype[attr] = Person.prototype[attr];        }    }

3.原型继承  (有人叫寄生组合式继承) 推荐指数❤❤❤❤❤

原理:1.继承属性:用 call 继承的方法

   2.继承方法:炮灰.prototype = Person.prototype

         Coder.prototype = new 炮灰

   3.手动赋值一个 constructor 指向子类:

         Coder.prototype.constructor = Coder

很多可以继承的方法的核心原理就是这里提到的原型继承。比如 Object.create() / Object.assign() / Object.defineProperties() 。例子1过后,再简单介绍这些方法。

例子1:
1 function Person(name,age){ 2         this.name = name; 3         this.age = age; 4     } 5  6 Person.prototype.say = function(){ 7         console.log(this.name+':呵呵'); 8     }; 9   10 function Coder(name,age){11         Person.call(this,name,age);12     }//子类私有继承父类私有13  14 Coder.prototype = Object.create(Person.prototype);15 Coder.prototype.constructor = Coder;//子类公有继承父类共有16  17 let p = new Person('成龙',68);18 let c = new Coder('房祖名',29);19 20 /*    子类改变属性,不会影响父级21 c.name = 122 console.log(c.name);//123 console.log(p.name);//成龙  */24 25 c.say();//成龙:呵呵26 p.say()//房祖名:呵呵

例子2:Object.create():

Coder.prototype = Object.create(Person.prototype)//此时就完成了属性继承,注意:手动修改 constructor 的指向。
Object.create:内置Object类天生自带的方法     1.创建一个空对象     2.让新创建的空对象的__proto__指向第一个传递进来的对象

    Object.assign():浅拷贝

Coder.prototype = Object.assign({},Person.prototype); //类似拷贝
Object.assign(Coder.prototype,Person.prototype)
将多个对象的可枚举属性拷贝到目标对象上,并且返回赋值后的目标对象。

    Object.defineProperties():

Object.defineProperties()
给对象定义属性,如果存在该属性, 则用新定义的属性更新已存在的属性, 如果不存在该属性,则添加该属性。

4.ES6 继承  (逼格最高,也是未来的趋势,必学必用)

知识点:
class  类     ES6给我们提供了class的语法糖,可以通过class来创建类
1      class Person {
//此行没有括号,在第二行constructor()传参 2 constructor(name,age){ 3 this.name = name; 4 this.age = age; 5 } 6 /*下面的写法就等同于把方法挂在原型上*/ 7 static say(){
// 加了static 静态方法,只给类用的方法 8 console.log('哈哈'); 9 }//方法和方法之间不用加逗号 ,10 say(){
//动态方法,给实例使用的方法11 console.log(this.name);12 }13 }14 15 let p = new Person('成龙',20);16 p.say();//成龙

声明子类 extends 父类名 就继承父类了

1     class Coder extends Person { 2         /* 3             在子类constructor中添加属性的小技巧 4  5             专属于子类的属性写在参数的前面,父类的属性放在后面 6             这样一来,就能直接使用...arg 7  8             ...arg 9                 把函数中的多余的参数放入数组中体现出来。10 11         */12         constructor(job,...arg){13             // console.log(this)14             super(...arg); //等同于调用父类,把多余的参数(和父类一样的属性)放到super中,达到继承父类属性的目的15             /*16                 在继承里,写constructor必须写super17                 super下面才能使用this,super有暂存死区(super上面不能使用this,用了就报错)18             */19             this.job = job;//自己私有的属性,直接this点即可20             console.log(arg);21         }22         codeing(){23             console.log('敲代码');24         }25         say(){26             console.log('哈哈');27         }28 29     }30 31     let c = new Coder('前端','周杰伦',20);32     let p = new Person('张杰',30);33     // delete c.name;34     console.log(c);35     // c.say();36     // p.say();37     // c.codeing();

 

转载于:https://www.cnblogs.com/MrZhujl/p/9907445.html

你可能感兴趣的文章
Permutations
查看>>
msp430项目编程13
查看>>
【IIS】IIS 7.0/7.5 绑定
查看>>
[SQL] 命令远程恢复数据库
查看>>
人生得以遇见
查看>>
让 .gitignore 文件生效
查看>>
用Python3实现的Mycin专家系统简单实例
查看>>
TortoiseSVN tutorial
查看>>
poj-2376 Cleaning Shifts (排序+贪心)
查看>>
mssql 创建触发器
查看>>
2.python数据结构的性能分析
查看>>
DataTables给表格绑定事件
查看>>
jquery操作select(取值,设置选中)
查看>>
图的遍历
查看>>
在Android中自定义捕获Application全局异常,可以替换掉系统的强制退出对话框(很有参考价值与实用价值)...
查看>>
C语言第三次博客作业---单层循环结构
查看>>
DevExpress 程序运行后 layoutView 卡片大小发生变化
查看>>
WPF DevExpress 中GridControl如何设置选中单元格的Style
查看>>
查看python库文档
查看>>
Python网络编程_抓取百度首页代码(注释详细)
查看>>