当前位置: 首页 > news >正文

js继承的实现方法


1.使用new方法继承

实现原理:在子类的构造函数中调用父类的构造函数。

function Parent(name){
    this.name = name;
    this.age = 40;
    this.sayName = function(){
        console.log(this.name);
    }
    this.sayAge = function(){
        console.log(this.age);
    }
}
function Child(name){
    this.parent = Parent;
    this.parent(name);
    delete this.parent;
    this.saySomething = function(){
        console.log(this.name);
        this.sayAge();
    }
}
var child = new Child('Lee');
child.saySomething();
//Lee
//40

2.使用call方法实现

实现原理:使用call方法改变函数上下文this指向,使之传入具体的函数对象。

function Parent(name){
    this.name = name;
    this.age = 40;
    this.say = function(){
        console.log(this.name + this.age);
    }
}
function Child(name){
    Parent.call(this,name); 
}
var child = new Child('Mike');
child.say();//Mike40

3.使用apply方法实现

实现原理:使用apply方法改变函数上下文this指向,使之传入具体的函数对象。

function Parent(name){
    this.name = name;
    this.age = 40;
    this.say = function(){
        console.log(this.name + this.age);
    }
}
function Child(name){
    Parent.apply(this,[name]);
    //Parent.apply(this,arguments); 效果同上
}
var child = new Child('Wade');
child.say();//wade40

4.使用原型链(prototype)方法实现

实现原理:子类的原型对象指向父类的实例,即重写类的原型。

function Parent(name){
    this.name = name;
    this.say = function(){
        console.log(this.name +' '+ this.age);
    }
}
function Child(age){
    this.age = age;
    this.saySomething = function(){
        console.log(this.name);
    }
}
Child.prototype = new Parent('petter');
var child = new Child(20);
child.say();//petter  20

5.使用混合方式实现

实现原理:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

function Parent(age){
    this.name = 'petter';
    this.age = age;
}
Parent.prototype.say = function(){
    return this.name + ' ' + this.age;
}
function Child(age){
    Parent.call(this,age);
    //Parent.apply(this,[age]);
    this.age = age;
}
Child.prototype = new Parent();
var child = new Child(21);
child.say();//petter  21


6. 寄生组合继承

实现原理:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的混合继承的缺点

    function Animal(name){
        this.name = name;
        this.sleep = function(){
            console.log(this.name + 'is sleeping');
        }
    }
    function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }
    (function(){
      // 创建一个没有实例方法的类
      var Super = function(){};
      Super.prototype = Animal.prototype;
      //将实例作为子类的原型
      Cat.prototype = new Super();
    })();
    // Test Code
    var cat = new Cat();
    console.log(cat.name);//Tom
    console.log(cat.sleep());//Tom is sleeping
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); //true

由于此篇中有涉及原型链和Call、Apply, 后面会写关于此知识点的文章。

相关文章:

  • dart系列(四) 动态生成”按钮”元素
  • 中国已超德国 成世界最大光伏发电国家
  • 把数据保存到数据库附加表dede_addon时出错,原因是字段名不合法
  • git的入门摸索和入门研究
  • linux iptables端口映射设置
  • Java内部类的一些总结
  • C/C++中对链表操作的理解实例分析
  • 基于Android应用《玩转英语》(总报告)
  • AMQP.0-10中文版——概述
  • python的各种推导式(列表推导式、字典推导式、集合推导式)
  • 深入理解Java内存模型
  • 中国开源云联盟解读《容器技术及其应用白皮书V1.0》
  • es6在项目中的应用
  • 新加坡将于明年制定网络安全法案
  • Android-1-电话拨号程序
  • angular学习第一篇-----环境搭建
  • CODING 缺陷管理功能正式开始公测
  • Django 博客开发教程 8 - 博客文章详情页
  • ES6 学习笔记(一)let,const和解构赋值
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • JavaScript 一些 DOM 的知识点
  • React-redux的原理以及使用
  • scala基础语法(二)
  • Sublime text 3 3103 注册码
  • Vue--数据传输
  • 闭包--闭包作用之保存(一)
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 如何借助 NoSQL 提高 JPA 应用性能
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • 云大使推广中的常见热门问题
  • No resource identifier found for attribute,RxJava之zip操作符
  • #【QT 5 调试软件后,发布相关:软件生成exe文件 + 文件打包】
  • #includecmath
  • (1)安装hadoop之虚拟机准备(配置IP与主机名)
  • (C++20) consteval立即函数
  • (function(){})()的分步解析
  • (附源码)计算机毕业设计ssm电影分享网站
  • (三)Honghu Cloud云架构一定时调度平台
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • .NET Core 中插件式开发实现
  • .Net Core 中间件验签
  • .NET Core跨平台微服务学习资源
  • .net framework4与其client profile版本的区别
  • .NET 反射 Reflect
  • .Net 中Partitioner static与dynamic的性能对比
  • .Net(C#)常用转换byte转uint32、byte转float等
  • .NET4.0并行计算技术基础(1)
  • .Net8 Blazor 尝鲜
  • .NET开源项目介绍及资源推荐:数据持久层
  • .NET性能优化(文摘)
  • /etc/sudoers (root权限管理)
  • ;号自动换行
  • [ CTF ]【天格】战队WriteUp- 2022年第三届“网鼎杯”网络安全大赛(青龙组)
  • [ 环境搭建篇 ] 安装 java 环境并配置环境变量(附 JDK1.8 安装包)