面向对象类

面向对象类

javascript

  1. 类与实例

    • 类的声明
    • 天生实例
  2. 类与继续

    • 怎样完成继续
    • 继续的几种体式格局

实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>面向对象</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <script type="text/javascript">

        /* 类的声明 */
        function Animal () {
            //经由过程this表明这是一个组织函数
            this.name = 'name'; 
        }
 
        // ES6 中的 class 声明
        class Animal2 {
            constructor () { // 组织函数
                this.name = name;
            }
        }

        /* 经由过程 new 实例化 */
        console.log(new Animal(),new Animal2());


        /* 继续的实质就是原型链 */
        /* 借助组织函数完成继续 */
        // 在子类中转变父级 this 的指向
        function Parent1 () {
            this.name = 'parent1';
        }
        Parent1.prototype.say = function () {};
        function Child1 () {
            Parent1.call(this); // call apply 能够转变函数运转上下文
            this.type = 'child1'; 
        }
        console.log(new Child1); // 无参数可省略括号
       /*  console.log(new Child1().say()); */
        // 瑕玷:Parent1 原型链上的东西并不会被 Child1 继续



        /* 借助原型链完成继续 */
        function Parent2 () {
            this.name = 'parent2';
            this.play = [1,2,3];
        }
        function Child2 () {
            this.type = 'child2';
        }
        Child2.prototype = new Parent2(); // 让实例访问到原型对象上
        console.log(new Child2);
        
        var s1 = new Child2();
        var s2 = new Child2();
        console.log(s1.play,s2.play);
        s1.play.push(4);

        // 瑕玷:对象不断绝,由于原型链中的原型对象是共用的
        // 转变一个对象的属性,另一个对象中的属性也会随之转变

        /* 组合体式格局 */
        function Parent3 () {
            this.name = 'parent3';
            this.play = [1,2,3];
        }
        function Child3 () {
            Parent3.call(this);
            this.type = 'child3';
        }
        Child3.prototype = new Parent3();
        var s3 = new Child3();
        var s4 = new Child3();
        s3.play.push(4);
        console.log(s3.play,s4.play);
        // 瑕玷:父级的组织函数执行了两次

        /* 组合体式格局的优化1 */
        function Parent4 () {
            this.name = 'parent4';
            this.play = [1,2,3];
        }
        function Child4 () {
            Parent3.call(this);
            this.type = 'child4';
        }
        Child4.prototype = Parent4.prototype;
        var s5 = new Child4();
        var s6 = new Child4();
       console.log(s5,s6);
       console.log(s5 instanceof Child4, s5 instanceof Parent4);
       console.log(s5.constructor);
       // 瑕玷:不能辨别实例是由父类制造的照样子类制造的

       /* 组合优化2 */
       // 道理是经由过程 Object.create 要领建立一个中心对象,参数是该对象的原型对象,然后把子类的组织函数赋值为该子类
       function Parent5 () {
            this.name = 'parent5';
            this.play = [1,2,3];
        }
        function Child5 () {
            Parent5.call(this);
            this.type = 'child5';
        }      
        Child5.prototype = Object.create(Parent5.prototype);
        Child5.prototype.constructor = child5;

        var s7 = new Child5();
        console.log(s7 instanceof Child5,s7 instanceof Parent5);
    </script>
</body>
</html>

License

  • 能够拷贝、转发,然则必需供应原作者信息,同时也不能将本项目用于商业用途。
    原文作者:spoiler
    原文地址: https://segmentfault.com/a/1190000013591899
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞