js面向对象的继承--拷贝，类式继承，原型继承

最新推荐文章于 2021-02-20 23:48:08 发布
最新推荐文章于 2021-02-20 23:48:08 发布
阅读量401 收藏 1
点赞数 1
分类专栏： 面向对象 文章标签： 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetllh/article/details/74011946
版权

1、拷贝继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function Aaa(){//父类
                this.name='张三';
            }
            Aaa.prototype.showname=function(){
                alert(this.name);
            }


//          a.showname();


            function Bbb(){ //子类
                Aaa.call(this); //属性的继承
            }

            //方法的继承

            //Bbb.prototype=Aaa.prototype;//引用
//          for(var i in Aaa.prototype){ //拷贝
//              Bbb.prototype[i]=Aaa.prototype[i];
//          }

            extend(Bbb.prototype,Aaa.prototype);

            Bbb.prototype.showname=function(){
                alert(123);
            }
            var a=new Aaa();
            a.showname();
            var b=new Bbb();
            b.showname();


            function extend(obj1,obj2){
                for(var i in obj2){
                    obj1[i]=obj2[i];
                }
            }
        </script>
    </head>
    <body>
    </body>
</html>

2、简单的类式继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //js是没有类的概念的，所有我们通常把构造函数当做类来使用

            function Aaa(){
                this.name='张三';
            }
            Aaa.prototype.showname=function(){
                alert(this.name);
            }

            var a=new Aaa();
//          a.showname();

            function Bbb(){

            }

            Bbb.prototype=new Aaa();//用什么方法能够实现一句话进行对象的拷贝：类式继承

            var b=new Bbb();
            alert(b.name);
        </script>
    </head>
    <body>
    </body>
</html>

3、完善的类式继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //js是没有类的概念的，所有我们通常把构造函数当做类来使用

            function Aaa(){
                this.name='张三';
            }
            Aaa.prototype.showname=function(){
                alert(this.name);
            }

            var a=new Aaa();
//          a.showname();

            function Bbb(){ //属性还是用call实现继承
                Aaa.call(this);
            }

            //方法借助中间的一个类实现

            function Fff(){

            }
            Fff.prototype=Aaa.prototype;
            Bbb.prototype=new Fff();
            Bbb.prototype.constructor=Bbb;


//          Bbb.prototype=new Aaa();//用什么方法能够实现一句话进行对象的拷贝：类式继承

            var b=new Bbb();
            alert(b.name);
        </script>
    </head>
    <body>
    </body>
</html>

4、原型继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a={
                name:'张三'
            }
            var b=cloneobj(a);

            b.name='李四';
            alert(a.name);
            alert(b.name);
            function cloneobj(obj){//原型继承
                var f=function(){};
                f.prototype=obj;
                return new f();
            }


            //拷贝继承：比较通用的方式，有无new都可以用
            //类式继承：new 构造函数
            //原型继承：无new对象

        </script>
    </head>
    <body>
    </body>
</html>
sweetllh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#面向对象继承-文件类
06-11
C#面向对象编程基础文件类的PPT文件Path：对文件或目录的路径进行操作（很方便） [字符串] Directory：操作目录（文件夹），静态类 File :操作文件，静态类，对文件整体操作；拷贝，删除，剪切等 Stream：文件流，...
什么是面向对象的拷贝继承?
xyphf的博客
08-20 614
面向对象的拷贝继承<script> var a = { name : '小明' }; var b = a; //对象的赋值 存在引用关系 b.name = '小强'; alert(a.name); //小强 因为互相影响 </script>我们希望b的修改不会影响到a,b修改以后a.name还是小
js的拷贝继承的两种方式
Scrow1204的博客
11-18 463
要点： 1.通过改变新实例对象的指针指向被继承的实例对象的地址，达到继承的效果 2.通过遍历复制前一个对象的属性和方法达到拷贝的效果 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/t
组合继承与拷贝继承
代码在路上的博客
11-30 119
组合继承：原型继承+借用构造函数继承（属性和方法都能继承） 例： function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; } Person.prototype.sayHi=function(){ console.log("Hello"); }; function Student(name,age,sex,score){ //借用构造函数 Person.call(this,name
javascript 继承之拷贝,原型,类式
weixin_30719711的博客
03-15 83
// 拷贝继承,在子类内调用父类并修正this指向,再通过for in 拷贝父类的方法实现继承,具体实现如下代码 : function Tab(){//父类构造函数 this.name='aaa'; this.age=20;}Tab.prototype.init = function(){ alert(this.name);};function Child(){//子类构造函数 Tab.cal...
Javascript面向对象编程（二） 构造函数的继承
12-11
今天要介绍的是，如何生成一个”继承”多个对象的实例。 比如，现在有一个”动物”对象的构造函数， 代码如下: function Animal(){ this.species = “动物”; } 还有一个”猫”对象的构造函数， 代码如下: function ...
JavaScript面向对象程序设计中对象的定义和继承详解
10-16
主要介绍了JavaScript面向对象程序设计中对象的定义和继承,结合实例形式详细分析了javascript面向对象程序设计中对象定义、继承、属性、方法、深拷贝等相关概念与操作技巧,需要的朋友可以参考下
Javascript面向对象编程（三） 非构造函数的继承
01-19
今天是最后一个部分，介绍不使用构造函数实现”继承”。... 这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现”继承”。 二、object()方法 json格式的发明人Douglas Crockford，提
javascript 面向对象编程基础：继承
12-11
我们看到这里继承的概念是多么的直白，“拷贝一个类的prototype 到另外一个类”，好，Code is cheap，看代码： function class1() { } function class2() { } class2.prototype = class1.prototype; class2....
对象继承的五种方法及浅拷贝与深拷贝
kangzai2012的博客
07-29 1795
        1-----第一种方法也是最简单的方法，使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行： function Animal(){ 　　　　this.species = "动物"; 　} function Cat(name,color){ 　　　 　this.name = name; 　　　 　this.color =...
js继承 - class的继承
piaojiancong的博客
02-20 6992
和之前讲的js的继承方式不同，class的继承是es6里面才有的。在讲class的继承之前，需要先了解一下class： class的基本语法 class，也就是我们常说的类， // class class Person { constructor(name, age) { this.name = name this.age = age } sayName() { console.log(this.name) } } const p1 = new Person('p1'
js高级-拷贝继承
前端小白的博客
07-14 1321
&lt;script&gt;    //拷贝继承：把一个对象中的属性或者方法直接复制到另一个对象中    //下面是简单的例子   /* var jk = {        name : "我好帅啊！",        age : 20,        sex : "男",        eat:function () {            console.log("今晚吃烤羊腿！");   ...
JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
热门推荐
sweetllh的博客
06-04 1万+
验证数字：^[0-9]*$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9]*)$ 验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$ 验证非零的正整数：^\+?[1-9][0-9]*$
正则表达式验证邮箱地址
sweetllh的博客
07-03 3489
邮箱@前缀的几种类型：1、纯数字 　　[email protected] 2、纯字母 　　　　 [email protected] 3、字母数字混合 　[email protected] 4、带点的 　　　　 [email protected] 5、带下划线 　　　 [email protected] 6、带连接线　　　 [email protected]邮箱@后缀的类型：1、123456@qq
写一个function，清除字符串前后两端的空格
sweetllh的博客
07-03 3306
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var str = " hyu kop jkl ";
BOM（浏览器对象模型）对象总结
sweetllh的博客
06-29 2708
1.window对象BOM的核心对象是window，它表示浏览器的一个实例，它也是ECMAScript规定的Globle对象，也就是说网页中任何一个对象都是在window这个对象里面的。如果有用到框架(frameset)，那么每个框架都有自己的window对象. 如下例子：var a = "666";aler(a); //666 alert(window.a) //666两条alert都是弹
js面向对象---无缝轮播图（附面向过程代码）
sweetllh的博客
06-29 1975
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> *{ padding: 0; margin: 0;
js面向对象组件开发---弹窗
sweetllh的博客
06-30 1035
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0;
jmu-java-03面向对象基础-clone方法、标识接口、深拷贝
最新发布
06-28
clone方法：是Object类中的一个方法，用于创建并返回一个对象的副本。这个方法可以被子类重写，以实现深拷贝或浅拷贝。 标识接口：是一个没有方法的接口，只是用于标识一个类是否具有某种特定的能力或属性。例如，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值