1、实现继承:原型链
        function extend1() {//父类型
          this.name = "张三";
        }
        function extend2(){ //子类型
          this.age =18;
        }
        extend2.prototype = new extend1();//extend2继承了extend1中的属性
       (父类型的实例化对象赋值给子类型的原型属性,父类型中的构造函数和原型信息都会给extend2)
        var _extend1 = new extend2();
        console.log(_extend1.name);//张三
        console.log(_extend1.age);//18
  function extend3() {
          this.address = "重庆";
        }
        extend3.prototype = new extend2();//extend3继承了extend1和extend2
        var _extend2 = new extend3();
        console.log(_extend2.name);//张三
        console.log(_extend2.age);//18
        console.log(_extend2.address);//重庆
        
    extend1.prptotype.name = "lucy";
    var _extend1 = new extend1();
    console.log(_extend1.name);//张三  就近原则,现在实例里面找,有就返回,没有才去原型里面找
   子类型从属于自己或他的超类型(父类型)
    alert(_extend2.instanceof Object);//true 
    alert(_extend2.instanceof extend2);//true 
    alert(_extend2.instanceof extend1);//true 
2、组合继承
  function Group1(age) {
          this.name = ["Linda",'Bob','Lucy','Anna'];
          this.age = 25;
        }
 构造函数里的方法放在构造里每次实例化都会分配一个内存地址(浪费),放在原型里保证每次实例化都只有一个引用地址:
        Group1.prototype.run = function () {
          return this.name + ',' + this.age;
        }
        function Group2(age) {
          Group1.call(this,age);//对象冒充只能继承构造实例中的,不能继承原型中的信息
        }
        Group2.prototype = new Group1();//原型链继承,否则原型里的run方法是访问不到的
        var _group1 = new Group2(20);
        console.log(_group1.run());

3、原型式继承
1. 临时中转函数
  function obj (o) {//o表示杨要穿ID进的一个对象
     function F(){};//F构造函数是一个临时新建的对象,用于存储传过来的对象
     F.prototype = o; //jiango对象实例赋值给F构造函数的原型对象
     return new F(); //返回这个得到传递过来对象的对象实例
  }
2. 字面量的声明方式(相当于 var box = new Box();)
 var box= {
   name:"Lucy",
   age :100
 }
F.prototype = 0;//
 var box1 = obj(box);box1就等于 new F();
 alert(box1.name);//lucy
4、寄生式继承=原型式+工厂模式
1. 临时中转函数
  function obj (o) {//o表示杨要穿ID进的一个对象
     function F(){};//F构造函数是一个临时新建的对象,用于存储传过来的对象
     F.prototype = o; //jiango对象实例赋值给F构造函数的原型对象
     return new F(); //返回这个得到传递过来对象的对象实例
  }
//寄生函数
function create(o){
   var f = obj(o);
   f.run = function(){
     return this.name + "方法";
   }
   return f;
}
 var box= {
   name:"Lucy",
   age :100
 }
var box1 = create(box);
alert(box1.run());//lucy方法
5、寄生式组合继承(最终完美版本)
1. 临时中转函数
  function obj (o) {//o表示杨要穿ID进的一个对象
     function F(){};//F构造函数是一个临时新建的对象,用于存储传过来的对象
     F.prototype = o; //jiango对象实例赋值给F构造函数的原型对象
     return new F(); //返回这个得到传递过来对象的对象实例
  }
2.寄生函数
  function create(box,desk){
   var f = obj(box.prototype);
   desk.prototype = f;
   return f;
}
3.构造函数
function Box(name,age){
  this.name = name;
  this.age = age;
]
4.原型式方法
Box.prototypr.run = function(){
    return this.name + this.age + "运行中..."
 }
5.对象冒充
function Desk(name,age){
   Box.call(this,name,age);
 }
6.通过寄生组合继承来实现继承
create(Box,Desk);//用于替代 Desk.prototype = new Box();

js基础——继承的更多相关文章

  1. 【 js 基础 】Javascript “继承”

    是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式. ...

  2. 【 js 基础 】【读书笔记】Javascript “继承”

    是时候写一写 “继承”了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:“汽车”可 ...

  3. JS基础-全方面掌握继承

    前言 上篇文章详细解析了原型.原型链的相关知识点,这篇文章讲的是和原型链有密切关联的继承,它是前端基础中很重要的一个知识点,它对于代码复用来说非常有用,本篇将详细解析JS中的各种继承方式和优缺点进行, ...

  4. 基础3:js实现继承的多种方式

    js实现继承的多种方式 1. 原型链继承 function Parent() { this.name = 'xwk' } Parent.prototype.getName = function() { ...

  5. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

  6. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  7. js基础--javaScript数据类型你都弄明白了吗?绝对干货

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...

  8. JS基础学习1

    1 JS 概述 一个完整的javascript实现是由以下3个不同部分组成的: (1)     核心(ECMAscript) (2)     文档对象模型(DOM)  Document object ...

  9. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

随机推荐

  1. html(),val(),text()的区别

    .html(),.text(),.val() 三种方法都是用来读取选定元素的内容: .html()是用来读取元素的HTML内容(包括其Html标签): .text()用来读取元素的纯文本内 容,包括其 ...

  2. js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  3. MUI - H5实现ios长按图标后进入图标排序及删除功能的效果

    html5实现ios长按图标后进入图标排序及删除功能的效果 我们知道在ios(国产定制安卓系统基本都有)设备上按下图标,图标就会不停的抖动,并且可以随心拖动排序和删除. 那么问题来了,我们怎么通过ht ...

  4. Linux使用及命令

    #命令模式下输入:光标移动到第34行第15个字符 <Enter>15l(这是小写的L) ctrl+u删除光标前面的字符 ctrl+j删除光标后面的字符 在Linux下用VIM打开大小几个G ...

  5. Person Re-identification 系列论文笔记(二):A Discriminatively Learned CNN Embedding for Person Re-identification

    A Discriminatively Learned CNN Embedding for Person Re-identification Zheng Z, Zheng L, Yang Y. A Di ...

  6. css技巧:清除浮动

    1.常用方法——overflow 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容 ...

  7. POJ-1125_Stockbroker Grapevine

    Stockbroker Grapevine Time Limit: 1000MS Memory Limit: 10000K Description Stockbrokers are known to ...

  8. 胡喜:从 BASIC 到 basic ,蚂蚁金服技术要解决两个基本的计算问题

    摘要: 揭开 BASIC College 神秘面纱,蚂蚁金服首次揭秘人才培养机制. 导读:5 月 6 日,蚂蚁金服副 CTO 胡喜在 2019 年 QCon 上做了<蚂蚁金服十五年技术架构演进之 ...

  9. 蓝牙(3)蓝牙UUID与SDP

    1.服务发现协议 (SDP) SDP = Service Discovery Protocol  主要用来根据已分配编号(UUID)搜索服务.浏览群组列表.文档 URL 和图标 URL等. 详细见: ...

  10. epoll简介(一)

    一:概述   1:简介 EPOLL类似于POLL,是Linux特有的一种IO多路复用的机制.它在2.5.44内核中引入. 对于大量的描述符处理,EPOLL更有优势,它提供了三个系统调用来创建管理epo ...