1. <big id="1ce2c754"></big>
      
         


        1.     
          <blockquote id="595a2d5f"></blockquote>

          1. 狗万官网酒店 > 狗万官网下载 > JS落实持续的几种可用方式示例_javascript艺术

            JS落实持续的几种可用方式示例_javascript艺术

            来源: 2019-08-04 19:43 我来投稿 参与评论
            这篇文章主要介绍了JS落实持续的几种可用方式,构成实例形式分析了JavaScript继续的四种普遍实现方式,包括原型链继承、组织继承、构成继承及寄生组合继承,要求的爱人可以参考下

            本文实例讲述了JS落实持续的几种可用方式。分享给大家供大家参考,实际如下:

            1,原型链继承

            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>原型链继承</title>
            </head>
            <body>
            <script>
              /**
               * 优点:
               * 老是父类的病例也是子类的病例
               * 父类新增原型方法或者原型属性 子类都能访问到
               * 简言之 轻而易举实现
               * 症结:
               * 无法实现多继续
               * 来自原型对象的引用属性和老是成套子类共享的
               * 创造子类实例的时光,无法向父组织函数传参
               * 可以在Cat组织函数中,为Cat老增加实例属性。如果要新增原型属性和艺术,则必须放在new Animal()这样的讲话之后执行。
               * **/
              function Animal(name) {
                this.name=name;//属性
                this.sleep=function () {//老方法
                  console.log(this.name+'正在睡觉')
                }
              }
              //原型方法
              Animal.prototype.eat=function (food) {
                console.log(this.name+'正在吃'+food)
              };
              //原型链继承---基本:名将父类的病例作为子类的原型
              function Cat() {
              }
              Cat.prototype=new Animal();
              Cat.prototype.name='cat';
              var cat=new Cat();
              console.log(cat);//cat._proto_====>Animal 可以利用Animal其中的name属性 sleep艺术
              //  也得以利用 cat._proto_._proto_的eat艺术 即animal的原型方法
              //  cat._proto_._proto_._proto_ 是object
              console.log(cat.name);
              cat.eat('fish');
              cat.sleep();
            </script>
            </body>
            </html>
            
            

            运作结果:

            2,组织继承

            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>组织继承</title>
            </head>
            <body>
            <script>
              /**
               *组织继承 相当于复制父类的病例给子类 (没有用到原型)
               * 只能利用父类的习性和艺术 决不能继续原型属性和艺术 故而cat决不能采取eat艺术
               * **/
              function Animal(name) {
                this.name=name;//属性
                this.sleep=function () {//老方法
                  console.log(this.name + '正在睡觉!');
                }
              }
              // 原型方法
              Animal.prototype.eat = function(food) {
                console.log(this.name + '正在吃:' + food);
              };
              function Cat(name) {
                Animal.call(this,name);//Cat就足以利用Animal的
            //    this.name=name
              }
              var cat=new Cat('Tom');
              console.log(cat);//只能使用Animal的习性和老方法 决不能采取原型的主意
              //cat的_proto_(指向的是一番函数) 是cat 组织器是Cat cat的_proto_._proto_ 是object
              console.log(cat.name);
            //  cat.eat('fish');
              cat.sleep()
            </script>
            </body>
            </html>
            
            

            运作结果:

            3,构成继承

            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>构成继承</title>
            </head>
            <body>
            <script>
              function Animal(name) {
                this.name=name;
                this.sleep=function () {
                  console.log(this.name+"正在睡觉");
                };
              }
              Animal.prototype.eat=function (food) {
                console.log(this.name+"正在吃"+food);
              }
              function Cat(name) {
                Animal.call(this,name)
              }
              Cat.prototype=new Animal();
            //  构成继承也是急需修复构造函数指向的。
              Cat.prototype.constructor=Cat;//组织器进行修改
              Cat.prototype.show=function () {//可以在子类的原型上加方法 不影响父类
                console.log("11111")
              };
              var cat=new Cat('Tom');
              console.log(cat);//cat可以直接利用animal的习性和老方法
              //cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object
              console.log(cat.name);
              cat.sleep();
              cat.eat('fish')
              cat.show()
            </script>
            </body>
            </html>
            
            

            运作结果:

            4,寄生组合继承

            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>寄生组合继承</title>
            </head>
            <body>
            <script>
              function Animal(name) {
                this.name=name;
                this.sleep=function () {
                  console.log(this.name+"正在睡觉");
                }
              }
              // 原型方法
              Animal.prototype.eat = function(food) {
                console.log(this.name + '正在吃:' + food);
              };
              function Cat(name) {
                Animal.call(this,name);
              }
            //  (function () {
                //创造一个没有实例方法的类
                var Super=function () {
                };
                Super.prototype=Animal.prototype;//eat
                console.log(Animal.prototype);//组织方法还是Animal 可以利用eat艺术 eat的_proto_ 是object
                //初始化这个规矩 把她作为子类(Cat)的原型
                Cat.prototype=new Super();//一般说来 的话是new Animal()
                Cat.prototype.constructor=Cat;//Cat的组织器还是Cat
            //  })();
              var cat=new Cat('Tom');
              console.log(cat.name);
              cat.sleep();
              cat.eat('food')
            </script>
            </body>
            </html>
            
            

            运作结果:

            感兴趣的爱人可以利用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun面试上述代码运行效果。

            更多关于JavaScript相关内容感兴趣的读者群可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调整技巧总结》、《JavaScript多少结构与做法技巧总结》、《JavaScript遍历算法与艺术总结》及《JavaScript和合学运算用法总结》

            瞩望本文所述对大学者JavaScript程序设计有所帮助。

            义务编辑:狗万官网酒店
             
             
            0% (0)
             
             
            0% (0)
            机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
            地名: 匿名?