继承、原型链继承、拷贝继承

最新推荐文章于 2021-03-21 18:04:16 发布
最新推荐文章于 2021-03-21 18:04:16 发布
阅读量340 收藏
点赞数
分类专栏： 继承 原型继承 拷贝继承 WEB前端知识 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itwangyang520/article/details/90340549
版权

 0.为什么要使用继承

方法可能功能相似，但是不是同一个方法(没有指向同一块内存，会造成内存浪费)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Person(name,age){
        this.name=name;
        this.age=age;
        this.say=function(){}
    }
    var p1=new Person();
    var p2=new Person();
    
    //p1对象和p2对象的say方法是否是同一个方法：false
    console.log(p1.say===p2.say);

    //由于say方法可能功能相似，但是不是同一个方法(没有指向同一块内存，会造成内存浪费)
    //解决方案：把say方法写在他们共同的(父对象)中
    //其实他们共同的父对象，就可以通过：Person.prototype来获取

    //-->只要把say方法写在Person.prototype中，那么say方法就是同一个方法
    Person.prototype.run=function(){
        console.log('时速500KM');
    }
    //此时p1和p2都可以访问到run方法
    p1.run();
    p2.run();
    //验证p1.run和p2.run是否是同一个方法？
    console.log(p1.run == p2.run); //指向同一个方法，这种方法避免了内存的浪费
    
    console.log(p1.run == Person.prototype.run);
    //true

    var p3=new Person();
    console.log(p3.run == p1.run); //true
    console.log(p3.run === p1.run);//true
    //结论：只要往某个构造函数的prototype对象中添加某个属性、方法，那么这样的属性、方法都可以被所有的构造函数的实例所共享
    //==>这里的【构造函数的prototype对象】称之为原型对象
    //  Person.prototype是 p1 p2 p3 的原型对象
    //  Person.prototype是Person构造函数的【实例】的原型对象

    //猜猜看？
    //  Person的原型对象是谁呢？
    //  -->首先要知道Person的构造函数：-->Function
    //  -->所以Person的原型对象是：Function.prototype

    //  p1的原型对象是谁呢？
    //  -->首先要知道p1是谁创建的？    -->Person
    //  -->所以p1的原型对象时：     Person.prototype

</script>
</html>

 0.1继承方法实现1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Dog(){

    }
    var d1=new Dog();
    //为了让d1有一个叫的方法，
    //不行：d1.say=function(){}
    //正确：
    Dog.prototype.say=function(){
        console.log('汪汪汪');
    }
    
    //继承的第一种实现方式：原型链继承
</script>
</html>

 0.2继承方法实现2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Cat(name){
        this.name=name;
    }
    var tom=new Cat("汤姆");
    //目的：把say方法放在tom的原型对象中(Cat.prototype)
    Cat.prototype.say=function(){}

    //问题：
    Cat.prototype.s1=function(){}
    Cat.prototype.s2=function(){}
    Cat.prototype.s3=function(){}
    Cat.prototype.s4=function(){}
    Cat.prototype.s5=function(){}
    //通过上面的方式，给tom的原型对象添加了好多方法，也就是让tom拥有了好多方法，但是代码产生了不少的冗余(重复)

    //-->为了减少这种重复，改良版：
    Cat.prototype = {
        a1:function(){},
        a2:function(){},
        a3:function(){},
        a4:function(){},
        a5:function(){}
    }
    console.log(tom.s1);    //可以访问
    console.log(tom.a1);    //undefined
    //原因：tom对象在创建的时候已经有了一个确定的原型对象，就是旧的Cat.prototype
    //由于Cat.prototype后面被重新赋值，但是tom对象的原型对象却没有改变，所以tom对象并不能访问到新原型对象中的a1-a5方法

    //如何解决这个问题？
    //-->先改变原型、再创建对象






    
    //继承的第一种实现方式：原型链继承
</script>
</html>

1.原型链继承 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Tiger(){

    }
    Tiger.prototype={
        a:function(){
            
        },
        b:function(){

        }
    }
    //创建tiger实例，此时的tiger实例的原型对象是新原型，所以tiger可以访问到新原型中的属性和方法(a/b)
    var tiger=new Tiger();
    console.log(tiger.a);
    console.log(tiger.b);


</script>
</html>

2.拷贝继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //1、已经拥有了o3对象
    var o3={gender:"男",grade:"大四",group:"第五组",name:"itwangyangcoder"};
    //2、创建一个o3对象的拷贝(克隆)：for...in循环
    var o4={};
        //a、取出o3对象中的每一个属性
    for (var key in o3) {
                //key就是o3对象中的每一个属性
        //b、获取到对应的属性值
        var value = o3[key];
        //c、把属性值放到o4中
        o4[key] = value;
    }

    //3、修改克隆对象，把该对象的name属性改为"李四"
    o4.name="coder"
    console.log(o4);    //最终的目标对象的结果

    //。。。后续如果修改了o4对象中的相关属性，就不会影响到o3

</script>
</html>

3.封装拷贝继承函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function extend(source,target){
        for (var key in source) {
                //key就是o3对象中的每一个属性
            //b、获取到对应的属性值
            var value = source[key];
            //c、把属性值放到o4中
            target[key] = value;
        }
    }

    var o3={gender:"男",grade:"初三",group:"第五组",name:"itwangyangcoder"};

    var o4={};
    extend(o3,o4);
    o4.name="coder";

    var o5={};
    extend(o3,o5);
    o5.name="李小龙";


</script>
</html>

 

itwangyang520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原型继承，借用构造函数继承，组合继承和拷贝继承
bettered的博客
07-01 765
原型继承： 为了数据共享,改变原型指向,做到了继承，通过改变原型指向实现的继承。 //动物的构造函数 function Animal(name,weight) { this.name=name; this.weight=weight; } //动物的原型的方法 Animal.prototype.eat=function () { ...
JS面向对象的继承三种方法：原型继承，原型冒充继承，复制继承
SUNLYH2_2的博客
01-14 1570
1.原型继承function Dog(){ this.a = function(){ alert(“123”); } }function SDog(){ this.b = function(){ alert(“321”); } }// Dog.prototype = new SDog(); var DD = new
js 继承（一）之原型链、借用构造函数、组合继承
前端一只包的博客
11-02 334
前言 … Just we 原型链 基本思想利用原型让一个引用类型继承另一个引用类型的属性和方法 function Father() { this.last_name = '张' } Father.prototype.sayLast_Name = function () { console.log('我的姓：' + this.last_name) } function Son()...
深克隆与原型原型链
qq_39208971的博客
10-31 165
乞版深克隆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script&
JS继承--原型链继承和类式继承
10-27
本文主要探讨了两种常见的继承方式：原型链继承和类式继承。 1. **原型链继承**： 原型链继承是JavaScript中实现继承的基本方式，它依赖于原型（`__proto__`）和构造函数之间的关系。在JavaScript中，每个对象都有...
Javascript原型链的原理详解
11-22
JavaScript原型链是JavaScript实现继承和共享属性的一种机制。在JavaScript中，每个对象都有一个内部属性`[[Prototype]]`，通常可以通过`__proto__`（非标准，但常见于许多环境）或`Object.getPrototypeOf()`来访问...
JS继承用法实例分析
12-02
在JavaScript中，继承主要可以通过三种方式实现：属性继承、call方法继承和原型链继承。 1. **属性继承** 属性继承通常涉及到调用父类的构造函数来初始化子类的实例。例如，在`Worker`构造函数中，通过`Person....
js对象的复制继承实例
10-24
2. 使用`hasOwnProperty`方法检查当前属性`k`是否为`obj`自身的属性，而不是从原型链继承的。 3. 如果`this[k]`（即目标对象的属性）未定义，那么将`obj[k]`的值赋给`this[k]`，实现了属性的复制。 在这个例子中，...
JS继承实现方法及优缺点详解
10-14
除此之外，JavaScript还提供了其他继承实现方式，如**组合继承**（结合了构造继承和原型链继承的优点，但存在两次调用父类构造函数的开销），**寄生组合继承**（通过寄生构造函数解决组合继承的重复调用问题），以及...
原型链的深拷贝继承方法
觅_的博客
03-21 352
继承会涉及到传值和传址问题！！！ 什么类型会涉及到传址问题？ 除了简单数据类型（基本数据类型）外都会涉及到传址问题 简单数据类型（基本数据类型）：Number、String、Boolean、Null、Undefined 复杂数据类型：Array、Object、Function、Date、Math、RegExp等 解决方案 1、JSON序列化 let SonProto = JSON.parse(JSON.stringifg(DadProto)); 缺点：深拷贝的对象中包含函数、undefined等值，此方法
类继承和原型继承的区别
colin_zff的博客
06-03 1269
https://www.cnblogs.com/constantince/p/4754992.html
深度克隆问题
Knowing something of everything and everything of something.
04-08 77
曾经面对想完全克隆出一个java对象出来。前面谈ArrayList的克隆问题，我记得当时我就傻傻的自己把被克隆对象的属性一一赋值到了一个新创建的对象中去。这真的是一件体力活啊。如果对象网络很复杂，所做的工作绝不会轻松哈。当时想到把对象图保存到文件中进行序列化。现在还找到一个不错的方法。直接使用管道流，将对象写入再读出，省却了序列化的步骤。找个时间来测验一下这两种方法，谁的效率更高。先把代码贴上： ...
继承
IT菜鸟学java
03-18 319
在面向对象的程序设计中，继承是一个非常重要的组成部分，没有使用继承的程序设计，就不能 称之为面向对象的程序设计。   继承就是在已经存在的类的基础上，进行扩展，从而产生新的类。已经存在的类称为父类、超类 或基类，而新产生的类称之为子类或派生类。   子类基本上可以继承父类所拥有的一切，属性、方法等等。但是子类除了拥有父类的属性和方法 也可以创建自己的特性。   Java中使用ex
构造函数、原型和继承
小超人日常码字
09-23 212
element.insertAdjacentHTML(position, text)； 可以读取字符串里面的标签 创建对象方式 字面量创建 构造函数 new Object() 自定义构造函数 1、构造函数和原型 声明式函数的使用方式不同决定其为构造函数还是普通函数 通过 new 来使用的声明式函数式构造函数 2、构造函数和原型 构造函数是一种特殊的函数，主要用来初始化对象，...
JS对象中，在原型链上找到属性后 最终将值拷贝给原对象 而不是引用
dglf54292的博客
05-16 267
遇到一个面试题 要求写一个函数A,每次进行new操作时候能输出2,3,4,5... new A() // 输出2 new A() // 输出3 new A() // 输出4 function A() { this.a++ console.log(this.a) } A.prototype.a = 1 这样写是错误的,因为实例化对象中的...
JS的继承是从一个对象原型向另一个对象原型的简单拷贝
交换一个思想，能得到俩思想
12-31 3964
JavaScript支持面向对象，但是其实现方式是通过简单的从一个对象原型向另一个对象原型的拷贝的方式来实现的。 实例如下： var BaseCls={}; BaseCls.getName=function(){ return "base class"; } var ChildCls = {}; ChildCls.getName = BaseCls.getName; BaseCls
JavaScript实现继承与原型链解析
1. 原型链继承：这是JavaScript中最常见的继承方式。通过将一个构造函数的原型设置为另一个构造函数的实例，从而实现属性和方法的继承。例如，`Fn2.prototype = new Fn1()` 就是利用原型链实现继承的一个例子。这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值