博客
关于我
js三大特性(附有HTML5代码实例)
阅读量:174 次
发布时间:2019-02-28

本文共 2598 字,大约阅读时间需要 8 分钟。

封装、继承以及多态是面向对象的共有特性,js作为面向对象的语言同样也支持这三个特性。

**封装:**当你需要隐藏一些属性和方法的时候,可以将这些属性和方法进行封装,然后通过外部接口(也就是公共的方法)进行调用。
举个例子:

    
Title

运行结果:

在这里插入图片描述
**继承:**类似于现实生活中的继承遗产。只可以继承父类拥有的东西。除此之外,js还支持多种继承。
讨论继承一般用动物作为例子,这是总的父类:

原型链继承: 将父类的实例作为子类的原型,使用prototype关键字进行继承

举个例子:

//原型继承    Cat.prototype = new Animal();    Cat.prototype.name = 'cat';    var cat = new Cat();    document.writeln(cat.name+"
"); cat.eat('fish'); cat.sleep(); document.writeln( (cat instanceof Animal) ); //true

运行结果:

在这里插入图片描述
优点:
父类新增原型方法/原型属性,子类都能访问到。且实例父类与子类共享
缺点:
来自原型对象的所有属性被所有实例共享且创建子类实例时,无法向父类构造函数传参
**实例继承:**为父类实例添加新特性,作为子类实例返回
举个例子:

function Cat(name){            var instance = new Animal();            instance.name = name || 'Tom';            return instance;        }        var cat = new Cat();        document.writeln(cat.name+"
"); cat.sleep(); document.writeln("Is Animal:"); document.writeln(cat instanceof Animal); // true document.writeln("
"); document.writeln("Is Cat:"); document.writeln(cat instanceof Cat); // false document.writeln("
");

运行结果:

在这里插入图片描述
优点:
返回的对象不受子类或者父类的限制,这在一定程度上符合里氏代换
缺点:
实例是父类的实例,不是子类的实例
不支持多继承
**组合继承:**通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
注意:组合继承是需要修复构造函数指向的,否则部分版本会出问题
举个例子:

//组合继承function Cat(name){    Animal.call(this);    this.name = name || 'Tom';}Cat.prototype = new Animal();Cat.prototype.constructor = Cat;var cat = new Cat();document.writeln(cat.name+"
");cat.sleep();document.writeln("Is Animal:");document.writeln(cat instanceof Animal); // truedocument.writeln("
");document.writeln("Is Cat:");document.writeln(cat instanceof Cat); // falsedocument.writeln("
");

运行结果:

在这里插入图片描述
优点:可以给父类传参且函数可复用
缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份更改后覆盖了)
寄生组合继承:
通过寄生方式,搞掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点
举个例子:

//寄生组合继承        function Cat(name){            Animal.call(this);            this.name = name || 'Tom';        }        (            function(){            // 创建一个没有实例方法的类            var Super = function(){};            Super.prototype = Animal.prototype;            //将实例作为子类的原型            Cat.prototype = new Super();            Cat.prototype.constructor = Cat;            }        )();        var cat =  new Cat();        document.writeln(cat.name+"
"); cat.sleep(); document.writeln("Is Animal:"); document.writeln(cat instanceof Animal); // true document.writeln("
"); document.writeln("Is Cat:"); document.writeln(cat instanceof Cat); // false document.writeln("
");

运行结果:

在这里插入图片描述

优点:解决了以上其他继承的缺点

缺点:子类的实现过程过于复杂
**多态:**就是在执行同一操作且作用于不同对象时,返回不同的结果 。
这个就是把Cat之类的换成Dog之类的类后执行不同的操作

转载地址:http://fqzj.baihongyu.com/

你可能感兴趣的文章
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>
mysql5.7安装
查看>>
mysql5.7性能调优my.ini
查看>>
MySQL5.7新增Performance Schema表
查看>>
Mysql5.7深入学习 1.MySQL 5.7 中的新增功能
查看>>
Webpack 之 basic chunk graph
查看>>
Mysql5.7版本单机版my.cnf配置文件
查看>>
mysql5.7的安装和Navicat的安装
查看>>
mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
查看>>
Mysql8 数据库安装及主从配置 | Spring Cloud 2
查看>>
mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件 能够使用的my.cnf配置文件
查看>>