js三大特性（附有HTML5代码实例）

最新推荐文章于 2022-12-04 00:11:59 发布

GodGump

最新推荐文章于 2022-12-04 00:11:59 发布

阅读量1.5k

点赞数 1

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/113098586

版权

html复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

封装、继承以及多态是面向对象的共有特性，js作为面向对象的语言同样也支持这三个特性。
**封装：**当你需要隐藏一些属性和方法的时候，可以将这些属性和方法进行封装，然后通过外部接口（也就是公共的方法）进行调用。
举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">
        function Person(name , sex){
            this.name = name ; //共有变量
            var sex = sex ; //私有变量
            this.show = function (){
               document.writeln( sex );//不能用this因为不是public权限
            }
        }
        var person = new Person('GodGump','男');
        document.writeln( person.name );
        //直接person.sex会报undefine
        document.writeln( "<br>" );
        person.show();
    </script>
</head>
<body>

</body>
</html>

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

<script language="JavaScript">
        // 定义一个动物类
        function Animal (name) {
            // 属性
            this.name = name || 'Animal';
            // 实例方法
            this.sleep = function(){
                document.writeln(this.name + '正在睡觉！');
            }
        }
        // 原型方法
        Animal.prototype.eat = function(food) {
            document.writeln(this.name + '正在吃：' + food);
        };
    </script>

原型链继承： 将父类的实例作为子类的原型，使用prototype关键字进行继承
举个例子：

//原型继承
    Cat.prototype = new Animal();
    Cat.prototype.name = 'cat';
    var cat = new Cat();
    document.writeln(cat.name+"</br>");
    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+"</br>");
        cat.sleep();
        document.writeln("Is Animal:");
        document.writeln(cat instanceof Animal); // true
        document.writeln("</br>");
        document.writeln("Is Cat:");
        document.writeln(cat instanceof Cat); // false
        document.writeln("</br>");

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

//组合继承
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+"</br>");
cat.sleep();
document.writeln("Is Animal:");
document.writeln(cat instanceof Animal); // true
document.writeln("</br>");
document.writeln("Is Cat:");
document.writeln(cat instanceof Cat); // false
document.writeln("</br>");

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

 //寄生组合继承
        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+"</br>");
        cat.sleep();
        document.writeln("Is Animal:");
        document.writeln(cat instanceof Animal); // true
        document.writeln("</br>");
        document.writeln("Is Cat:");
        document.writeln(cat instanceof Cat); // false
        document.writeln("</br>");

运行结果：
在这里插入图片描述

优点：解决了以上其他继承的缺点
缺点：子类的实现过程过于复杂
**多态：**就是在执行同一操作且作用于不同对象时，返回不同的结果。
这个就是把Cat之类的换成Dog之类的类后执行不同的操作

GodGump

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js三大特性（附有HTML5代码实例）

封装、继承以及多态是面向对象的共有特性，js作为面向对象的语言同样也支持这三个特性。**封装：**当你需要隐藏一些属性和方法的时候，可以将这些属性和方法进行封装，然后通过外部接口（也就是公共的方法）进行调用。...
复制链接

扫一扫