前端 - JS面向对象(下)

文章目录

方法链
包装对象
原型链
原型链中的默认值
对象的拷贝
继承(一)
继承(二)

方法链


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>
        function Person( name ){
            this.name = name;
        }

        Person.prototype.showName = function(){
            console.log(this.name);
            return this;
        };

        Person.prototype.sayHello = function(){
            console.log('Hello !');

        };


        var person1 = new Person('越今朝');
        // person1.showName();
        // person1.sayHello();

        /*
        *   方法链:
        *       person1.showName().sayHello()
        *           person1.showName()方法返回自己表示返回一个对象
        *           只有对象才能调用函数方法
        *
        * */
        person1.showName().sayHello()
    </script>
</body>
</html>

包装对象


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>

        /*
        *    包装对象:
        *           基础数据类型都有包装对象
        *           当某个基础类型在进行 . 操作的时候，会由它的包装对象来代替
        *           操作完成之后，包装对象消失
        *           每一次找的包装对象都不一样
        * */

        var str = 'hello';
        str.charAt(0);
        str.substring();

        str.name = 'name';
        // 包装对象 name 在基础类型str进行 . 操作的时候进行代替,操作完成之后包装对象消失
        alert( str.name ) // undefined


    </script>



</body>
</html>

原型链

从构造函数找起，直到Object为止


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

        <script>

           /*
           *    原型链:    __proto
           *            描述对象和原型之间的关系(对象有number属性则输出，没有则用原型属性替代)
           *            在构造函数中找number属性，如果找不到则遍历原型找属性number直到Object.prototype，
           *            遍历原型的这些对象与原型之间的关系叫原型链
           *
           *            Fn.prototype是一个对象，可以存值
           *            基础类型的包装对象不可以存值
           *
           *
           * */

           function Fn() {
               this.number = 10;
           }

           Fn.prototype.number = 20;
           Object.prototype.number = 30;

           var obj = new Fn();
           alert(obj.number);

        </script>

</body>
</html>

原型链中的默认值


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>

        /*
        *      原型中的默认属性(json格式存储原型的属性没有默认属性)\
        *           默认属性 constructor
        *               Fn.prototype.constructor = Fn (默认值, Fn 为构造函数名)
        *
        * */

        function Fn() {};

        Fn.prototype.a = 10;
        Fn.prototype.b = 20;
        Fn.prototype.c = 30;

        // json
        // Fn.prototype = {
        //     a : 10,
        //     b : 20,
        //     c : 30,
        // };

        var obj = new Fn();
        alert( obj.constructor );
        
    </script>

</body>
</html>

对象的拷贝


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>

        /*
        *   对象的拷贝：
        *           1.浅拷贝
        *           2.深拷贝
        *
        *
        * */

        var a = {
            x : 10,
            y : 20,
            z : 30,
            v : {
                aa : 40,
            }
        };

        // b引用a,此处 = 不是赋值而是引用,b的改动会影响a
        var b = a;
        b.w = 40;
        alert( a.w );// 40

        var b = Clone(a);
        b.w = 40;
        alert( a.w ); // undefined
        alert( b.w );// 40

        b.v.bb = 50;
        alert( b.v.bb );// 50
        alert( a.v.bb );// 50 浅拷贝
        alert( a.v.bb );// undefined 深拷贝


        function Clone(obj) {
            // 浅拷贝
            var newObj = {};
            for( var i in obj ){
                newObj[i] = obj[i]; // newObj.v = a.v (引用关系)
            };
            return newObj;

        }


        function Clone(obj) {
            //深拷贝
            var newObj = {};
            for( var i in obj ){
                if ( (typeof obj[i]).toLowerCase() == 'object' ){
                    // 递归执行深拷贝,无论对象中有几层对象关系都进行如下遍历操作
                    newObj[i] = Clone(obj[i]);
                }else{
                    newObj[i] = obj[i];
                }
            };
            return newObj;
        };



        // 深拷贝方法的简写
        function Clone(obj) {
            for( var i in obj )this[i]=(typeof obj[i]).toLowerCase() == 'object'?new Clone(obj[i]):obj[i];
        };

        var demo1 = {
            x : 10,
            y : 20,
            z : 30,
            v : {
                aa : 40,
            }
        };

        var demo2 = new Clone(demo1);
        demo2.v.cc = 80;
        alert( demo2.v.cc );// 80
        alert( demo1.v.cc );// undefined



    </script>


</body>
</html>

继承(一)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>

        /*
        *   继承:
        *       1.子级继承父级(父级拥有的子级都拥有)
        *       2.子级的改动不影响父级
        *
        * */

        function Person( name, age, sex ) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        Person.prototype.showName = function () {
            alert( this.name );
        };

        Person.prototype.showAge = function () {
            alert( this.age );
        };

        Person.prototype.showSex = function () {
            alert( this.sex );
        };

        var per1 = new Person( '越祁', 18, '女' );
        per1.showSex();



        // 继承, 子级 Pson
        // 构造函数私有属性的继承
        function Pson( name, age, sex, marry ) {
            // 构造函数Person的自执行，此时的this指向window
            // Person( name, age, sex )
            // 子级继承父级私有属性,此处传入的参数this指向子级构造函数
            Person.call( this, name, age, sex );
            this.marry = marry;
        }

        // 构造函数公有属性原型的继承,此时 = 是引用，子级会改变父级的原型
        // Pson.prototype = Person.prototype;
        Pson.prototype = new Clone(Person.prototype);
        Pson.prototype.showMarry = function () {
            alert(this.marry);
        };

        var per2 = new Pson( '越今朝', 20, '男', false );
        per2.showMarry();
        per2.showName();

        // 对象深拷贝方法
        function Clone(obj) {
            for( var i in obj )this[i]=(typeof obj[i]).toLowerCase() == 'object'?new Clone(obj[i]):obj[i];
        };



    </script>



</body>
</html>

继承(二)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    /*
    *   继承的第二种方法
    *
    * */

    function Person( name, age, sex ) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    Person.prototype.showName = function () {
        alert( this.name );
    };

    Person.prototype.showAge = function () {
        alert( this.age );
    };

    Person.prototype.showSex = function () {
        alert( this.sex );
    };

    var per1 = new Person( '越祁', 18, '女' );
    per1.showSex();



    // 继承, 子级 Pson
    // 构造函数私有属性的继承
    function Pson( name, age, sex, marry ) {
        // 构造函数Person的自执行，此时的this指向window
        // Person( name, age, sex )
        // 子级继承父级私有属性,此处传入的参数this指向子级构造函数
        Person.call( this, name, age, sex );
        this.marry = marry;
    }

    // 构造函数公有属性原型的继承,此时 = 是引用，子级会改变父级的原型
    // Pson.prototype = Person.prototype;

    //继承的第二种方法, 构造一个构造函数Fn
    function Fn(){};
    //构造函数Fn对象引用父级对象
    Fn.prototype = Person.prototype;
    // 构造一个Fn构造函数的对象 Pson.prototype,其可以调用构造函数的公有属性Fn.prototype,但其改变不会影响Fn公有属性
    Pson.prototype = new Fn();

    Pson.prototype.showMarry = function () {
        alert(this.marry);
    };

    var per2 = new Pson( '越今朝', 20, '男', false );
    per2.showMarry();
    per2.showName();





</script>



</body>
</html>

前端 - JS面向对象(下)

文章目录

方法链

包装对象

原型链

原型链中的默认值

对象的拷贝

继承(一)

继承(二)

猜你喜欢