JS:day 13

5630 ワード

引き継ぐ
1.原型の対象チェーンとObject.prototype
  hasOwnProperty()            //                 
  propertyIsEnumerable()      //             
  isPrototypeOf()             //                   
  valueOf()                   //          
  toString()                  //            

    Object.prototype.add = function(value){
        return this + value;
    };
    var book = {
        title:"hello world"
    };
    console.log(book.add(5));
    console.log("title".add("end"));

2.対象継承(Object.create)

    var person1 = {
        name:"Anqi",
        sayName:function(){
            console.log(this.name);
        }
    };
    var person2 = Object.create(person1,{
        name:{
            configurable:true,
            enumerable:true,
            value:"Hello",
            writable:true
        }
    });
    person1.sayName();
    person2.sayName();

3.構造関数の継承(2つの方法)

    function Rectangle(length,width){
        this.length = length;
        this.width = width;
    }
    Rectangle.prototype.getArea = function(){
        return this.length * this.width;
    };
    Rectangle.prototype.toString = function(){
        return "[Rectangle" + this.length + "x" + this.width + "]";
    };
    function Square(size){
        this.length = size;
        this.width = size;
    }

//    Square.prototype = new Rectangle();
//    Square.prototype.constructor = Square;
//                 
    Square.prototype = Object.create(Rectangle.prototype,{
        constructor:{
            configurable:true,
            enumerable:true,
            value:Square,
            writable:true
        }
    });

    Square.prototype.toString = function(){
        return "[Square" + this.length + "x" + this.width + "]";
    };

    var rect = new Rectangle(5,10);
    var square = new Square(6);

    console.log(rect.getArea());
    console.log(square.getArea());

    console.log(rect.toString());
    console.log(square.toString());

【重要な二段コード】
    Square.prototype = new Rectangle();
    Square.prototype.constructor = Square;
Square.prototype = Object.create(Rectangle.prototype,{
        constructor:{
            configurable:true,
            enumerable:true,
            value:Square,
            writable:true
        }
    });
3.構造関数の盗撮
call()とappy()は構造関数で盗む鍵です.

    function Rectangle(length,width){
        this.length = length;
        this.width = width;
    }
    Rectangle.prototype.getArea = function(){
        return this.length * this.width;
    };
    Rectangle.prototype.toString = function(){
        return "[Rectangle" + this.length + "x" + this.width + "]";
    };
    function Square(size){
        Rectangle.call(this,size,size);
    }

    Square.prototype = Object.create(Rectangle.prototype,{
        constructor:{
            configurable:true,
            enumerable:true,
            value:Square,
            writable:true
        }
    });

    Square.prototype.toString = function(){
        return "[Square" + this.length + "x" + this.width + "]";
    };

    var square = new Square(6);

    console.log(square.length);
    console.log(square.width);
    console.log(square.getArea());

4.親へのアクセス方法
Square.prototype.toString = function(){
        var text = Rectangle.prototype.toString.call(this);
        return text.replace("Rectangle","Square");
    };
この方法はSquare.prototype.toStringをRectangle.prototype.toStringに変更するだけで、これは唯一の親類訪問の方法です.
オブジェクトモード
1.モジュールモード
モジュールモードは、プライベートデータを持つ個々のオブジェクトを作成するためのモードである.

    var person =(function(){
        var age=25;
        return{
            name:"Anqi",
            getAge:function(){
                return age;
            },
            setAge:function(value){
                age=value
            }
        }
    })();
    person.setAge(20);
    console.log(person.getAge())

以下は変更後の露出モジュールモードです.

    var person = (function(){
        /*  */
        var age=25;
        function getAge(){
            return age;
        }
        function setAge(value){
            age=value;
        }
        return{
            /*   */
            name :"Anqi",
            getAge:getAge,
            setAge:setAge
        }
    })();

2.構造関数のプライベートメンバー
コンストラクタにプライベートデータを定義する

    /*            */
    function Person(name){
        //  
        var age;
        this.getAge = function(){
            return age;
        };
        this.setAge = function(value){
            age = value;
        };

        this.name=name;
    }
    var anqi = new Person("Anqi");
    anqi.setAge(24);
    console.log(anqi.getAge())

3.作用域の安全な構造関数
newオペレータを使わずに直接呼び出してthisの値を変えると、エラーが発生します.

    function Person(name){
            this.name = name;
    }
    Person.prototype.sayName=function(){
        console.log(this.name)
    };
    var Anqi = Person("anqi");

    console.log(Anqi instanceof  Person);     // false
    console.log(typeof Anqi);       // undefined

このモードはnewの使用の有無に応じて関数の挙動を制御するために使用されてもよい.
function Person(name){
        if(this instanceof Person){
            this.name = name;
        }else{
            return new Person(name);
        }
    }