狗万官网酒店 > 狗万官网下载 > 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)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?
    1. &lt;big id="1ce2c754"&gt;&lt;/big&gt;