继承性—javascript面向对象高级

唐小青      2022-02-08     477

关键词:

## 继承性 ##
  js不是一门完全是面向对象的语言,它没有专门实现对象继承的机制,但是可以通过语法层面实现对象的继承,要实现继承可以通过以下几种方式实现继承。
  (这里也可以通过ES6中的class语法实现继承,更接近传统语言如java,请见我ES6新特性)

2.通过constructor实现传值。

3.类Class的概念:构造函数

  通过构造函数产生的对象叫做实例。具备构造函数的所有属性
  将公用的方法和属性,提取出来存到原型上


继承的几种方式
 1.通过原型实现继承
      function Father(){
        this.name = ‘zhangsan‘;
        this.age = 12;
        this.gender = ‘mail‘;
        this.sayHello = function(){
          console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
         }
       }
         function Child(){};
         
         Child.prototype = new Father();
         var c1 = new Child();
         c1.sayHello()


 2.传参数的原型式继承

    function Father(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
     }
    //定义父对象
     Father.prototype.sayHello = function(){
       console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
     }

     function Child(name,age,gender){
        this.constructor(name,age,gender)
     // 将参数传给constructor
     };
     
     Child.prototype = new Father();
     var c1 = new Child(‘zhangsan‘,40,‘femail‘);
     c1.sayHello()

    **存在的问题:该方法是采用的原型覆盖的方法,会继承父元素的所有属性,但是如果父元素不具备某些子元素特有的原型属性的话。就会丢失该属性。**

 3.对象冒充
   将某一个构造函数当做普通函数调用,执行后会生成指向当前对象
 
     function Father(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
     }

     Father.prototype.sayHello = function(){
       console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
     }

     function Child(name,age,gender){
        this.newObj = Father;//这句话是重点
        this.newObj(name,age,gender)
        //这里将Father函数当成一个普通函数,执行后会产生一个对象,着就是对象冒充
        delete this.newObj
     };

     var c1 = new Child(‘lis‘,40,‘femail‘);
     console.log(c1.name)

   **问题:该方式不能继承Father原型上的属性。 **

 4.通过call和apply手动改变this的指向,原理:(对象冒充)

    function Father(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
     }

     Father.prototype.sayHello = function(){
       console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
     }

     function Child(name,age,gender){
        Father.call(this,name,age,gender)
        //这句话是关键,将Father里的所有this都指向Child
     };

     var c1 = new Child(‘zhangsan‘,40,‘femail‘);
     c1.sayHello()

  ** 问题:因为实质是对象冒充,所以也不能继承Father的原型**
   
 5.组合式继承(混合)

     function Father(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
     }

     Father.prototype.sayHello = function(){
       console.log(‘hello,i m ‘+this.name +‘,i m ‘+this.age+‘years old‘)
     }

     function Child(name,age,gender){
        Father.call(this,name,age,gender)
     };
       //这里不仅用对象冒充用了Father这个构造函数,
       //还继承了Father的prototype

      Child.prototype = Father.prototype;
     var c1 = new Child(‘lis‘,40,‘femail‘);
     console.log(c1)
     c1.sayHello()

























































































































javascript高级面向对象--最简单的继承方式,混入mix

说明(2017.3.30):1. 最简单的继承方式,混入mix1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6</head>7<body>8<scripttype=" 查看详情

javascript面向对象-继承

JavaScript虽然不是面向对象的语言,但是我们通过构造可以让其支持面向对象,从而实现继承、重写等面向对象的特性。具体代码如下://创建类PersonfunctionPerson(age,name){this.age=age;this.name=name;this.sayHello=function(){console.log("大人大家... 查看详情

浅谈javascript的面向对象程序设计

  本文继续讲解JavaScript的面向对象程序设计。继承是面向对象语言中的一个基本概念,面向对象语言支持两种继承实现方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。但是在JavaScript中... 查看详情

javascript面向对象原型继承

<scripttype="text/javascript"> //原型链继承functionshape(){this.name="shape";this.showname=function(){console.log(this.name);}}functionshape_Two(){this.name=‘shape_Two‘}functionTriangle(side,height 查看详情

javascript面向对象和继承

我相信,当你读完这篇100%原创文章时,javascript面向对象和继承轻松拿下不再是问题。统一的html和css<divid="app"></div>#app{position:relative;width:500px;height:500px;background:#ccc;}  第一,面向对象是什么,为什么需要它。  这里... 查看详情

javascript面向对象--继承

1//继承:ECMAScript只支持实现继承依靠原型链来实现2//一、原型链3//先来理清下关系:4//每个构造函数都会有一个原型对象Person-->prototype5//每一个原型对象都会有一个指向构造函数的指针Person.prototype.constructor-->Person6//每一个... 查看详情

javascript面向对象编程:构造函数的继承

原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html总结对象之间继承的5种方法:比如,现在有一个"动物"对象的构造函数。  functionAnimal(){    this.species="动物";  }还有一个"猫"对象的构造函数。... 查看详情

javascript面向对象:构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。  functionAnimal(){    this.species="动物"; ... 查看详情

javascript面向对象:非构造函数的继承

这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。  varChinese={  ... 查看详情

对象的概念——javascript面向对象高级

什么是对象?   a.对现实事物的抽象    —面向对象是对现实事物的抽象     b.对数据的封装   —是对具体数据的封装,是一堆属性和方法的集合对象的三大特征(封装、继... 查看详情

javascript面向对象编程:非构造函数的继承

转载自:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html 一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。  varChinese={    nation:‘中国‘  };还有一个对象,叫做"医生"... 查看详情

javascript面向对象系列第三篇——实现继承的3种形式

...指在原有对象的基础上,略作修改,得到一个新的对象。javascript主要包括类式继承、原型继承和拷贝继承这三种继承方式。本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承  大多数面向对象的编... 查看详情

快速理解javascript面向对象编程—原型继承

  总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习。  对象  创建对象两种方法:(若要生成对象实例必须调用构造函数)    1、varobj={name:"jer",age:12};(在js内部调用了预设的Object()构... 查看详情

javascript面向对象编程:构造函数的继承

作者: 阮一峰日期: 2010年5月23日这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例。今天要介绍的是,对象之间的"继承"的五种方法。比如,现在有一个"动物"对象的构造函数。 ... 查看详情

javascript面向对象编程:非构造函数的继承

  什么叫非构造函数的继承?比如,现在有一个对象,叫做"中国人"。  varChinese={    nation:‘中国‘  };还有一个对象,叫做"医生"。  varDoctor={    career:‘医生‘  }请问怎样才能让"医生"去继承"中国人"... 查看详情

javascript面向对象编程:非构造函数的继承

今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个对象,叫做"中国人"。1 varChinese={2    nation:‘中国‘3  };还有一个对象,叫做"医生"。 1 varDoctor={2    ... 查看详情

javascript面向对象编程:非构造函数的继承

作者: 阮一峰日期: 2010年5月24日这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"继承"。一、什么是"非构造函数"的继承?比如,现在有一个... 查看详情

javascript面向对象编程:非构造函数的继承

原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html作者: 阮一峰这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承"。今天是最后一个部分,介绍不使用构造函数实现"... 查看详情