几种js继承的式分享

本文主要和大家分享几种js继承的式分别有原型继承、借用构造函数继承、组合继承、寄生式继承、寄生组合方式继承,希望能帮助到大家。

原型式继承

可以在不必预先定义构造函数的情况下实现继承,其本质是执行给定对象的浅复制。而复制得到的副本还可以得到进一步的改造

function parent(o) {    this.username = 'father';    this.array = [1,2,3]}function child() {    this.age = 20}child.prototype = new Parent();

登录后复制

缺点:  
1. 父类和子类公用原型链上的引用变量。
2. 创建子类实例是无法向父类的构造函数传递参数

借用构造函数继承

借用父类的构造函数来增强子类的实例,就是说,相当于复制一份父类的属性或者方法给子类了

function Parent(name,arr) {    this.name = name;    this.arr = arr;    this.run = function() {        console.log('run function')   }}function Child(name, arr) {    this.age = 20;    Parent.call(this,name,arr);}var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]);obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1

登录后复制

优点:
1.解决了子类实例共享父类引用属性的问题
2.创建子类实例时,可以向父类构造函数传递参数
缺点:
1.无法实现复用,每一个子类实例都有一个新的run函数,如果实例的对象多了,内存消耗过大

组合式继承

组合继承避免了原型链和借用构造函数的缺陷,融合它们的优点。

function Parent(name,arr) {    this.name = name;    this.arr = arr;}Parent.prototype.run = function() {    console.log('run function');}function Child(naem,arr) {    this.age = '20';    Parent.call(this,name,arr);        // 借用构造函数 ==》 核心语句   1》不能复用}Child.prototype = new Parent(); // 原型链 ==》 核心语句  1》父构造函数不能传递参数 2》arr是引用属性,一个改变,互相影响

登录后复制

优点:
1.不存在引用属性共享的问题
2.可传递参数
3.方法可复用
缺点:
子类原型上右一份多余的父类实例的属性

寄生式继承

与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强对象,最后返回对象。

function createAnother(original) {    var clone = Object.create(original); //    clone.sayHi = function() {        console.log(Hi)    }   return clone;var Person = {    name: 'Blob',    friends: ['Shelby', 'Court', 'Van'];}var anotherPerson = createAnother(person);anotherPerson.sayHi(); // Hi

登录后复制

寄生组合式继承

组合继承是js最常用的继承模式,组合继承最大的问题就是无论在什么情况下,都会调用两次构造函数:一次是在创建子类型原型时,另一次是在子类型构造函数的内部。

function beget(obj){   // 生孩子函数 beget:龙beget龙,凤beget凤。    var F = function(){};    F.prototype = obj;    return new F();}function Super(){    // 只在此处声明基本属性和引用属性    this.val = 1;    this.arr = [1];}//  在此处声明函数Super.prototype.fun1 = function(){};Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){    Super.call(this);   // 核心    // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub;            // 核心Sub.prototype = proto;              // 核心var sub = new Sub();alert(sub.val);alert(sub.arr);

登录后复制

相关推荐:

细说js继承

js继承的实现代码_javascript技巧

JS继承–原型链继承和类式继承_基础知识

以上就是几种js继承的式分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784967.html

(0)
上一篇 2025年3月8日 17:17:56
下一篇 2025年3月1日 17:39:25

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Mock.JS拦截HTTP请求实例解析

    mockjs是一种比较通用的前端模拟http请求及回复的工具,能够仿真处各类http的请求及返回结果。实现在无后端的情况下,前端对于后端接口的仿真。mock的基础使用也是比较简单,本文我们主要和大家分享mock.js拦截http请求实例解析…

    编程技术 2025年3月8日
    200
  • js中table数据导出excel文件

    本文主要和大家分享一些代码,主要和大家分享js中table数据导出excel文件的方法实例,希望能帮助到大家。 表格转换成excel并下载 (document).ready(function () {(“#myBtn”).click(fun…

    编程技术 2025年3月8日
    200
  • Node.js get,post提交数据实例代码

    本文主要和大家分享Node.js getpost提交数据实例代码,希望能帮助到大家。 demo.js: //引入http模块var http=require(‘http’);var url=require(‘url’);var ejs=re…

    编程技术 2025年3月8日
    200
  • JS经纬度距离计算代码分享

    本文主要和大家分享js经纬度距离计算代码分享,希望大家能用以下代码学会计算js经纬度距离,希望能帮助到大家。  GetDistance:function(lat1, lng1, lat2, lng2, len_type = 2, decim…

    编程技术 2025年3月8日
    200
  • js正则表达式如何应用

    本文主要和大家js中正则表达式的应用实例(包括面试题),希望能帮助到大家,能让大家正确使用js正则表达式。 1、找重复项最多的字符和个数 var str = 'sassdfdfffdasdffffffsdsdddsss'…

    编程技术 2025年3月8日
    200
  • JS代码怎样实现记住账号密码

    这次给大家带来js代码怎样实现记住账号密码,js代码实现记住账号密码的注意事项有哪些,下面就是实战案例,一起来看一下。 很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。 引用添加Cookie setCookie (…

    编程技术 2025年3月8日
    200
  • js、jq如何验证银行卡账号代码分享

    本文主要和大家分享js、jq如何验证银行卡账号代码,本文主要通过代码来分享,希望能帮助到大家。 nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3…

    编程技术 2025年3月8日
    200
  • SpringMvc+AngularJs应如何使用

    这次给大家带来springmvc+angularjs应如何使用,springmvc+angularjs使用的注意事项有哪些,下面就是实战案例,一起来看一下。 前端框架分段繁杂,框架本身也是日新月异,但是不免还是有很多好的框架,例如jQuer…

    2025年3月8日 编程技术
    200
  • js中的BOM如何正确操作

    一、什么是BOM? bom:browser object model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,bom由多个对象构成,其中代表浏览器窗口的window对象是bom的顶层对象,其他…

    2025年3月8日
    200
  • 用Video.js实现H5直播界面

    这次给大家带来用video.js实现h5直播界面,用video.js实现h5直播界面的注意事项有哪些,下面就是实战案例,一起来看一下。 最近做了一个移动端H5简易版直播页,只有直播功能,后期再添加弹幕和礼物,要求是在微信中,虽然没有涉及到录…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论