js対象向け--オブジェクトの作成

11692 ワード

JavaScript 対象に向けるオブジェクトを作成

一、工場モデル

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>    </title>
    </head>
    <body>
    <script type="text/javascript">
 function createPerson(name,age,job){
        var o=new Object();
        o.name=name;
        o.age=age;
        o.job=job;
        o.sayName=function(){
                console.log(this.name);
        };
        return o;
    }
    var person1=createPerson("liujie",13,"student");
    var person2=createPerson("lisi",14,"doctor");
    person1.sayName();
    person2.sayName();
    </script>
    </body>
</html>

は、この関数を数回にわたって呼び出すことができ、毎回、3つの属性と1つの方法を含むオブジェクトを返します.工場モードは複数の類似対象を作成する問題を解決しましたが、対象識別の問題が解決されていません.つまり、どのように一つの対象のタイプを知っていますか?
二、コンストラクタモード
コンストラクターモードと工場モードの違い: 1、表示されていないでオブジェクトを作成します. 2、直接属性と方法をthisオブジェクトに与えました. 3、return文がありません. 特に注意してください.コンストラクタはいつも大文字で始まるべきです.コンストラクタは小文字で始まるべきです. コンストラクタ自体も関数です.オブジェクトを作成するのに使います.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>      </title>
    </head>
    <body>
    <script type="text/javascript">
    function Person(name,age,job){
        /*
           Person    ，    new   
        1、       
        2、               (  this         )
        3、            ，          
        4、     
         */
        this.name=name;
        this.age=age;
        this.job=job;
        this.sayName=function(){
            console.log(this.name);
        };
    }
    var person1=new Person("liujie",13,"student");
    var person2=new Person("lisi",15,"doctor");
    person2.sayName();
    person1.sayName();
    //constructor        
    console.log(person1.constructor==Person);//true
    console.log(person2.constructor==Person);//true
    //         Object   ，  Person   
    //    Object   ，           Object
    console.log(person1 instanceof Object);//true
    console.log(person1 instanceof Person);//true
    console.log(person2 instanceof Object);//true
    console.log(person2 instanceof Person);//true

    //      ：                  。  Person         Function  
    console.log(person1.sayName==person2.sayName);//false
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>      2</title>
    </head>
    <body>
    <script type="text/javascript">
    function Person(name,age,job){
        this.name=name;
        this.age=age;
        this.job=job;
        this.sayName=function(){
            console.log(this.name);
        };
    }
    //        
    var person=new Person("liujie",14,"student");
    person.sayName();//liujie
    //        
    Person("lisi",16,"doctor");
    window.sayName();//lis
    //             
    var o=new Object();
    Person.call(o,"wangwu",15,"master");//      o       Person    ，   o         sayName()  
    o.sayName();//wangwu
    </script>
    </body>
</html>

三、原型モード
プロトタイプは原型の対象です. プロトタイプオブジェクトを使用する利点は、すべてのインスタンスにその中に含まれる属性と方法を共有させることです. 各関数にはプロトタイプ属性があり、この属性はオブジェクトを指すポインタであり、このオブジェクトの用途は特定のタイプのすべてのインスタンスで共有できる属性と方法を含む. すべてのプロトタイプのオブジェクトが自動的にconstructor属性を取得します.この属性にはプロトタイプ属性の所在関数を指すポインタが含まれています. ここでPerson.prototype.com nstructorはPersonを指します. コンストラクタを呼び出して新しい例を作成すると、この例の内部にはコンストラクタのプロトタイプオブジェクトを指すポインタ(内部属性)が含まれます.つまり、このポインタは構造関数とは関係がない. あるオブジェクトの属性をコードが読み込むたびに、名前が与えられた属性を持つ検索を行います. 検索はまずインスタンス自体から開始します.例で指定された名前の属性が見つかった場合、属性の値を返します.見つかっていない場合は、ポインタが指すプロトタイプのオブジェクトを探し続け、プロトタイプのオブジェクトから指定された名前の属性を検索します.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>    </title>
    </head>
    <body>
    <script type="text/javascript">
    function Person(){
    }
    Person.prototype.name="liujie";
    Person.prototype.age=13;
    Person.prototype.job="student";
    Person.prototype.sayName=function(){
        console.log(this.name);

    };
    //  person1 person2             sayName()  
    var person1=new Person();
    person1.sayName();//liujie
    var person2=new Person();
    person2.sayName();//liujie
    console.log(person1.sayName==person2.sayName);//true

    console.log(Person.prototype.isPrototypeOf(person1));//true
    console.log(Person.prototype.isPrototypeOf(person2));//true

    //Object.getPrototypeOf()           
    console.log(Object.getPrototypeOf(person1)==Person.prototype);//true
    console.log(Object.getPrototypeOf(person2)==Person.prototype);//true
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>    2</title>
    </head>
    <body>
    <script type="text/javascript">
        function Person(){
    }
    Person.prototype.name="liujie";
    Person.prototype.age=13;
    Person.prototype.job="student";
    Person.prototype.sayName=function(){
        console.log(this.name);

    };
    //  person1 person2             sayName()  
    var person1=new Person();
    person1.name="liujiejie";
    //                       ，                 
    //                       ，                 
    //person1.name=null;//          null,             ，             
    delete person1.name;//    delete              ，                 
    person1.sayName();//liujiejie
    var person2=new Person();
    person2.sayName();//liujie
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>    3</title>
    </head>
    <body>
    <script type="text/javascript">
        function Person(){
    }
    Person.prototype.name="liujie";
    Person.prototype.age=13;
    Person.prototype.job="student";
    Person.prototype.sayName=function(){
        console.log(this.name);

    };
    //  person1 person2             sayName()  
    //  hasOwnProperty()  ，            ，  true
    var person1=new Person();
    var person2=new Person();
    console.log(person1.hasOwnProperty("name"));//false
    person1.name="liujiejie";
    console.log(person1.name);//liujiejie       
    console.log(person1.hasOwnProperty("name"));//true
    console.log(person2.name);//liujie      
    console.log(person2.hasOwnProperty("name"));//false
    delete person1.name;
    console.log(person1.name);//liujie     
    console.log(person1.hasOwnProperty("name"));
    </script>
    </body>
</html>

四、原型の動態

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>      </title>
    </head>
    <body>
    <script type="text/javascript">
        function Person(){
        }
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };
        var friend = new Person();//        ，           
        Person.prototype.sayHi = function(){//        
            alert("hi");
        };
        friend.sayHi();   //"hi" – works!        sayHi  ，          
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>      2</title>
    </head>
    <body>
    <script type="text/javascript">
        function Person(){
        }

        var friend = new Person();//          ，                [[Prototype]]  ，                             。
        Person.prototype = {
            //                                   ，                
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };
        friend.sayName();   //error
    </script>
    </body>
</html>

五、原型とin操作符

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>   in   </title>
    </head>
    <body>
    <script type="text/javascript">
    /*
               ，in      true。               。
     */
        function Person(){
    }
    Person.prototype.name="liujie";
    Person.prototype.age=13;
    Person.prototype.job="student";
    Person.prototype.sayName=function(){
        console.log(this.name);

    };
    //  person1 person2             sayName()  
    //  hasOwnProperty()  ，            ，  true
    var person1=new Person();
    var person2=new Person();
    console.log(person1.hasOwnProperty("name"));//false
    console.log("name" in person1);//true

    person1.name="liujiejie";
    console.log(person1.name);//liujiejie       
    console.log(person1.hasOwnProperty("name"));//true
    console.log("name" in person1);//true

    console.log(person2.name);//liujie      
    console.log(person2.hasOwnProperty("name"));//false
    console.log("name" in person2);//true

    delete person1.name;
    console.log(person1.name);//liujie       
    console.log(person1.hasOwnProperty("name"));//false
    console.log("name" in person1);//true
    </script>
    </body>
</html>

六、簡単な原型文法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>        </title>
    </head>
    <body>
    <script type="text/javascript">
    /*
       Person.prototype                    ，      
           ：constructor      Person 
      ，       ，        prototype  ，          constructor  

                     prototype  ，  constructor           constructor  (  Object    )，    Person  。
     */
        function Person(){
        }
        Person.prototype = {
            //constructor:Person,//          Person
            //    constructor       [[Enumerable]]      true。     ，   constructor        。  ，
                Object.defineProperty()  。
            name : "Nicholas",
            age : 29,
            job: "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };

        var friend = new Person();

        alert(friend instanceof Object);  //true
        alert(friend instanceof Person);  //true
        alert(friend.constructor == Person);  //false
        alert(friend.constructor == Object);  //true
    </script>
    </body>
</html>

複数の画像をアップロードするjsテクニック