javaScript 继承

最新推荐文章于 2024-08-04 16:17:01 发布
最新推荐文章于 2024-08-04 16:17:01 发布
阅读量139 收藏 1
点赞数
分类专栏： # JavaScript 文章标签： 继承
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/115184927
版权
本文介绍了ES6之前JavaScript的继承方式，包括组合继承（构造函数与原型结合）、借用构造函数和原型对象的继承方法。重点讲解了寄生组合式继承，通过避免多次调用父类构造函数，优化了内存使用。还涉及了数组方法forEach、filter和some，以及对象操作如Object.keys和Object.defineProperty。
摘要由CSDN通过智能技术生成

继承

1.ES6之前没有提供extends继承方法，所以我们需要构造函数+原型对象模拟实现继承，成为组合继承。

call方法

call()：调用函数，并且修改这个函数的this指向

方法：

fun.call(thisArg,arg1,arg2...)

thisArg:调用函数修改this指向的对象

arg1 arg2：传递的其他函数

举例：

<script>
        function fn(x,y) {
            console.log(x+y);
            console.log(this);
        }

        var o = {
            name:'andy'
        };

        fn.call(o,2,1);
    </script>

此时this通过call()调用指向了 对象o

在这里插入图片描述

借用构造函数继承属性
  1. 先定义一个父构造函数
  2. 再定义一个子构造函数
  3. 子构造函数继承父构造函数的属性(使用call方法)
<script>
        function Father (uname,age) {
            this.uname = uname;
            this.age = age;
        }

        function Son (uname ,age,score) {
        	// 此时父类的 this 指向子类的 this，同时调用这个函数
            Father.call(this,uname,age); 

            this.score = score;
        }
        var son = new Son('刘德华',18,100);
        console.log(son);
    </script>

在这里插入图片描述

借用原型对象继承父类型方法

一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。

核心原理：

① 将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类() 

② 本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象

③ 将子类的 constructor 从新指向子类的构造函数
  1. 先定义一个父构造函数
  2. 再定义一个子构造函数
  3. 子构造函数继承父构造函数的属性(使用call方法)
    // 1. 父构造函数
//父构造函数
function Father(uname, age) {
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2 .子构造函数 
  function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
  Son.prototype = Father.prototype;  
  //这样直接赋值会有问题,
  //如果修改了子原型对象,
  //父原型对象也会跟着一起变化
  
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    console.log('孩子要考试');

  }
  var son = new Son('刘德华', 18, 100);
  console.log(son);
  console.log(Father.prototype)

此时修改了子原型对象，加了exam方法，父原型对象也会有exam方法
在这里插入图片描述
所以需要：

Son.prototype = new Father();

这样改变子原型对象就不会改变父原型对象，因为son.prototype指向的是Father的实例对象。

同时注意constructor函数的指向问题

// 2 .子构造函数 
 function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
  Son.prototype = new Father();
  // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    console.log('孩子要考试');

  }

最终代码：

// 1. 父构造函数
function Father(uname, age) {
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2 .子构造函数 
  function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
  Son.prototype = new Father();
  // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    console.log('孩子要考试');

  }
  var son = new Son('刘德华', 18, 100);
  console.log(son);

在这里插入图片描述

组合继承

1.使用原型链实现对原型属性和方法的继承

通过借用构造函数来实现对函数实例属性的继承.

这样，既通过在原型上定义方法实现了函数的复用，又保证本了每个实例都有它自己的属性，实现：

function Super(){
 //再次只声明基本属性和引用属性
 this.val = 1;
 this.arr = [1];
 //在此声明函数
 Super.prototype.fun1 = function(){};
 Super.protoype.fun2 = function(){};
 function Sub(){
   Super.call(this);//从父类拷贝一份父类的实例属性给子类作为子类的实例属性
}
Sub.prototype = new Super();//创建父类实例作为子类的原型 ，此时这个父类实例就又有了一份实例属性，但这份会被第一次拷贝来的实例属性屏蔽掉
var sub1 = new Sub(1);
var sub2 = new Sub(2);
alert(sub1.fun === sub2.fun);//true

2.优点：
不存在引用属性共享的问题
可传递参数
函数可复用

3.缺点：
子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的（在代码的注释部分给予解释），内存浪费。

寄生组合式继承

组合继承（构造函数和原型的组合）会调用两次父类构造函数的代码，比如：

function Person(name){
  this.name=name;
}
Person.prototype.sayName=function(){
  console.log(this.name+' '+this.gender+' '+this.age);
}
function Female(name,gender,age){
  Person.call(this,name);//第一次调用父类构造函数             
  this.age=age;
  this.gender=gender;
}
Female.prototype=new Person();//第一次调用父类构造函数
Female.prototype.constrcutor=Female;//因重写原型而失去constructor属性，所以要对constrcutor重新赋值

因此引入寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的方式来继承方法

不需要为子类指定原型而调用父类的构造函数，我们需要拿到的仅仅是父类原型的一个副本。因此可以通过传入子类和父类的构造函数作为参数，首先创建父类原型的一个复本，并为其添加constrcutor，最后赋给子类的原型。

这样避免了调用两次父类的构造函数，为其创建多余的属性。

function inheritPrototype(Female,Person){ 
  var protoType=Object.create(Person.prototype);
  protoType.constructor=Female;
  Female.prototype=protoType;
}
//取代
//Female.prototype=new Person();
//Female.prototype.constrcutor=Female

inheritPrototype(Female,Person);
Female.prototype.sayAge=function(){
console.log(this.name+' '+this.age);
}
 var fm=new Female('skila','female',19);
 fm.sayName();//skila female 19
 fm.sayAge();skila  19

出处：简书：寄生组合式继承

ES5中新增的一些方法

数组方法forEach遍历数组
 <script>
        var arr = [1, 222, 3];
        var sum = 0;
        arr.forEach(function (currentValue, index, Array) {
            //参数一是:数组当前项的值
            //参数二是:数组元素的索引
            //参数三是:当前的数组
            console.log('元素' + value);
            console.log('索引' + index);
            console.log(Array);

            sum += value;
        });

        console.log(sum);
    </script>

在这里插入图片描述

数组方法filter过滤数组
var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(currentValue, index,array) {
  	 //参数一是: 数组当前项的值
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);
  //[66,88] 
  //返回值是一个新数组
数组方法some

在这里插入图片描述

var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    //参数一是:数组当前项的值
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);
//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
字符串方法trim去除字符串两端的空格
var str = '   hello   '
console.log(str.trim()）  //hello 去除两端空格
var str1 = '   he l l o   '
console.log(str.trim()）  //he l l o  去除两端空格
字符串方法Object.keys(对象) 获取对象属性名
<script>
        var obj = {
            id: 1,
            pname: '小米',
            price: 1999,
            num: 2000
        };
        var result = Object.keys(obj)
        console.log(result)//[id，pname,price,num]
    </script>

在这里插入图片描述

字符串方法Object.defineProperty设置或修改对象中的属性

在这里插入图片描述

Object.defineProperty(对象，修改或新增的属性名，{
		value:修改或新增的属性的值,
		writable:true/false,//如果值为false 不允许修改这个属性值
		enumerable: false,//enumerable 如果值为false 则不允许遍历
        configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})
MichstaBe-IMUT
关注
专栏目录
JavaScript 继承的实现
10-29
JavaScript继承的实现方式多样，除了原型链之外，还有如下几种常见方式： 1. **构造函数继承**：通过调用父构造函数来初始化子对象，但不能避免方法重复。 2. **原型链继承**：通过修改子构造函数的原型使其指向父...
JavaScript继承与聚合实例详解
01-19
本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考，具体如下： 一、继承 第一种方式：类与被继承类直接耦合度高 1. 首先，准备一个可以被继承的类（父类），例如 //创建一个人员类 function Person(name)...
JavaScript的继承
不睡觉的怪叔叔的博客
09-25 2829
目录 一、使用原型链继承 1.1 原型链的基本概念 1.2 默认的原型 —— Object实例 1.3 确定原型与实例的关系 1.4 原型链的缺点 二、经典继承（借用构造函数） 2.1 经典继承的缺点 三、组合继承 四、原型式继承 五、寄生式继承 5.1、寄生式继承的缺点 六、寄生组合式继承 6.1、组合继承的缺点 6.2、寄生组合式继承的原理 一、使用原型链继...
JavaScript继承
m0_61480985的博客
11-28 1656
寄生组合继承存在效率问题，最主要的效率问题是父类构造函数始终被调用两次，一次是在创建子类原型时调用，另一次是在子类构造函数中调用，本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行的时候重写自己的原型就可以了。把子类的原型对象指向父类，就能使用父类中的方法和属性了。采用原型式继承不自定义类型，临时创建一个构造函数，借助已有的对象作为临时构造函数的原型，然后在此基础实例化对象，并返回。继承就是指一个子类继承父类的属性和方法，使得子类对象（实例化对象）具有父类的方法和属性。
JavaScript 继承
qq_36854246的博客
04-25 1253
JavaScript 继承原型链继承 原型链继承 JavaScript原型链详细版见这里 多说无益，直接上代码 // 1st function Super() { this.colors = ['red', 'blue'] } var test = new Super() // 1st function Super() { this.colors = ['red', 'blue'] } var test = new Super() // 2nd function Sub() {} // 1
javascript 继承
qq413142634的博客
01-11 420
javascript继承
weixin_38131307的博客
01-30 2382
设计模式
JavaScript 继承的简单理解
weixin_46463984的博客
03-19 664
JavaScript 继承的简单理解
JavaScript 继承百花齐放：从原型链到 ES6 类
最新发布
~~~
08-04 3775
继承，简单来讲就是让子类能够访问到父类的属性和方法，继承的主要作用就是实现代码的重用。在JavaScript中，主要通过原型链来实现继承。我们重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个指针指向原型。上篇文章中我们已经了解了原型和原型链的概念，本文就来介绍一下js中实现继承的几种方式。
JavaScript 继承的实现方式
qq_41361668的博客
03-12 1345
javascript 继承
JavaScript 继承的7种实现方式
weixin_44244924的博客
04-25 655
JavaScript 继承的7种实现方式
java学习之JavaScript继承
01-08
然而，继承中所涉及的不仅仅是一个对象，并且 js 也没有继承这一现有的机制，那它如何实现的呢？ 原型 在 JavaScript 中，每个构造函数都拥有一个prototype属性，它指向构造函数的原型对象，这个原型对象中有一个 ...
史上最为详细的javascript继承（推荐）
11-28
相信小伙伴们都知道到原型链继承（ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法），因为原型链继承非常的强大，但是也有它的缺点，接下来咱们就按照上面的维度看看原型链继承到底是什么鬼 ...
JS 递归 拷贝
Ulrica_Amaris的博客
09-12 683
递归 什么是递归 1.函数中调用函数自己 2.使用递归的时候一定需要有结束递归的条件，否则就会变成死循环，直到浏览器崩溃。 递归例子 //递归实现n个数字的和 function getSum(x){ if(x==1){ return 1; } return x+getSum(x-1); } console.log(getSum(5)); 常规求5个数的和 //求5个数字的和 var sum=0 for(var i=0;i<6;i++){ sum=sum+
JS事件
Ulrica_Amaris的博客
09-07 570
事件 1.事件就是交互事件，用户点击实现回馈，是交互体验的核心功能。 绑定事件 1.ele.onxxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上。 2.obj.addEventListener(type, listener, options) IE9以上，可以为一个事件绑定多个处理程序。 3.obj.attachEvent(‘on’ + type, fn（事件处理函数）)； IE独有，一个事件同样可以绑定多个处理程序 解除事件
Echarts数据可视化
Ulrica_Amaris的博客
03-24 527
什么是数据可视化 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 数据可视化的场景 常见的数据可视化库 D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化
javaScript基础 (运算符 逻辑控制语句 循环控制语句)
Ulrica_Amaris的博客
03-11 491
运算符 算术运算符 概念 算术运算使用的符号，用于执行两个变量或值的算术运算。 浮点数的精度问题 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001 所以：不要直接判断两个浮点数是否相等 ! 表达式和返回值 表达式：是由数字、运算符、变量等以能求得数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值