首页 > 编程语言 >【笔记14】Javascript - 继承

【笔记14】Javascript - 继承

时间:2022-11-02 14:33:58浏览次数:42  
标签:function 14 Javascript Father 笔记 Son 原型 new prototype

【笔记14】Javascript - 继承

继承的概念不陌生,在原型、原型链那里,就知道一个对象能继承到原型很多属性和方法。

各种继承的方法有优势有不足,看下继承发展史:


继承

传统形式:原型链

之前讲过用原型链可以继承很多属性和方法,但这种过多的继承了没用的属性。

Grand.prototype.company = "Apple";
function Grand(){
this.lastName = "Jobs";
}
var grand = new Grand();

Father.prototype = grand;
function Father(){
this.name = "Steve";
}
var father = new Father();

Son.prototype = father;
function Son(){
this.hobbit = "smoke";
}
var son = new Son();

不足

这种方式把“有用、没用”的属性和方法都给继承过来了。


借用构造函数

之前遇到有函数实现了部分功能,之后就没必要把已的功能再写一遍的情况。

function Person() { name, age, sex } {
this.name = name;
this.age = age;
this.sex = sex;
}
function Student(name, age, sex, grade) {
Person.call(this, name, age, sex);
this.grade = grade;
}
var student = new Student();

借用构造函数的特点,勉强算是继承了属性和方法,但这种方式都基于 new 出一个对象,不然借用里的 this 就没有意义了。

不足

借用了构造函数的方法,但不能继承构造函数的原型;

每次构造函数都要多走一个函数(写法上是省了,效率没提升,但在工业开发上因方便协作还会用);

共享原型

直接定义原型相等,强制一个原型在两个构造函数间共享;

Father.prototype.lastName = "Jobs";
function Father() { }
function Son() { }
Son.prototype = Father.prototype; // 通过这一句实现原型共享
var son = new Son();
var father = new Father();

看控制台:

【笔记14】Javascript - 继承_继承

多个构造函数,共用一个原型,简单明了;还可以把这种用法抽象成功能,封装成函数使用;

function inherit(Target,Origin){
Target.prototype = Origin.prototype;
}

封装成函数的目的是:让构造函数继承某个东西。这样构造函数所创建的对象就可以全继承这个东西了,要是只让对象继承,那直接改对象的 __proto__ 就完事了。 

现在来整合一下上面的代码:

function inherit(Target, Origin){
Target.prototype = Origin.prototype;
}
Father.prototype.lastName = "Jobs";
function Father() { }
function Son() { }
inherit(Son,Father); // 执行这函数
var son = new Son();
var father = new Father();
console.log(son.lastName); // Jobs

注意:这里要先设置继承,后创建对象,不然对象都创建出来了,才去改继承的话,就继承不到了。

不足

如果 Son 建的对象想加个原型属性,通过修改原型属性添加的话,那 Father 建的对象就也有这个属性了,因为他俩的原型指向是同一个地方。所以,这种方式不能随便改动自己的原型。

Son.prototype.sex = "male";
console.log(father.sex); // male

如果 Son 即有继承来的原型,还能算定义创建自己的原型属性,该怎么弄?

圣杯模式

可以加一个中间层的构造函数,让他跟 Father.prototype (上层函数)共享原型,再把 Son.prototype 指向这个中间层函数,形成原型链,这样再给 Son.prototype 加属性方法就不会影响 Father.prototype 的原型了,同时还能继承他的属性方法。

F.prototype = Father.prototype;
function F(){}
Son.prototype = new F();

这么一来,即可以实现 son 的属性自由,还能继承 father 的属性方法,就是目前流行的:圣杯模式。

分析:

Son 的原型是 new F(); 

new F() 的原型是 F.prototype,两层关系;Son.prototype 和 F.prototype 是原型链的关系;

此时的 F.prototype 跟 Father.prototype 共享原型了,不影响 Son.prototype 设置属性方法;

理解了这一层,我们来封装一下这个函数。

function inherit(Target, Origin) {
function F() {}
F.prototype = Origin.prototype;
Target.prototype = new F();
}
Father.prototype.lastName = "Jobs";
function Father() { }
function Son() { }
inherit(Son, Father);
var son = new Son();
var father = new Father();

控制台输出:

【笔记14】Javascript - 继承_圣杯模式_02

看结果,Son 给自己的原型设置了自己的属性,又继承了 Father 原型的属性。

现在,我们看看原型链的关系:

// son.__proto__       -->  new F();                    new F() 是对象
// new F().__proto__ --> Father.prototype

【笔记14】Javascript - 继承_构造函数_03

这么看, Son 的原型是指向 Father 的原型,






标签:function,14,Javascript,Father,笔记,Son,原型,new,prototype
From: https://blog.51cto.com/ahuiok/5816556

相关文章

  • 力扣-147-对链表进行插入排序
    ListNode*insertionSortList(ListNode*head){ //待排节点需要和它前面的节点比较?单链表怎么比,单链表的反向遍历? //只能从头开始找 //还要手写链表的交换? if(!he......
  • 十月阅读笔记1
    6、交流知道你想要说什么,当我们面临会议,重要通话,或者只是撰写技术文档,问下自己你要表达的中心想法是什么,围绕这一点进行展开。了解你的听众,选择风格,传达一个消息,可以是正......
  • 十月阅读笔记2
    8、正交性正交性是一个从几何学中借鉴而来的术语,如果两条直线相交成直角,他们就是正交的。这在向量中的解释是沿着一条直线移动,你投影到另一条直线上的位置不变。在计算机......
  • 知网文献检索笔记
    知网文献检索笔记前言大二上了一门文献检索的课。当时感兴趣做了一下笔记。现在参照一下。以后写论文的时候可以借鉴一下。不过当时学得有些表面了。当时我对于论文的感觉就......
  • 《高大上的PPT设计秘笈》笔记
    PPT排版经验前言最近需要上课讲PPT,我回顾一下以前写的PPT排版笔记。参考教程:《​​高大上的PPT设计秘笈人气体验版​​》有些截图有些模糊,大家可以看视频。主要内容文章目......
  • SpringBoot笔记:控制类Controller
    一个类想要变成控制类,只需要在类上加一个@Controller注解即可,其作用为指定请求路径及其对应的处理方法。一、请求路径常用注解:可以直接使用@RequestMapping、@PostMappi......
  • JavaScript中的Object.keys的详解和用法
    目的:在实际开发中,我们有时需要知道对象的所有属性。解决办法:ES5引入了Object.keys方法,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。参考:https://......
  • dart 学习笔记
    1.dart下载安装,vscode安装dart,coderunner等2.dart语法1)需要入口函数main,或者void(没有返回值)main2)定义变量varstr=‘kkk’Stringstr=‘kkkk’永远不改变的常量......
  • Javascript 异常处理的一些经验
      写在前面 为了提升应用稳定性,我们对前端项目开展了脚本异常治理的工作,对生产上报的jserror进行了整体排查,试图通过降低脚本异常的发生频次来提升相关告警的准确......
  • Javascript进阶笔记 - BOM
    6.BOM目录6.BOM1.BOM简介2.History3.Location4.定时器1.BOM简介BOM是指游览器对象模型,BOM提供了一组对象,方便用户通过JS操作游览器BOM对象Window代表......