liguofeng29’s blog

個人勉強用ブログだっす。

javascript - 基本③

オブジェクト

<script type="text/javascript">
    // 定義
    function Person(name, age) {
        // 属性
        this.name = name;
        this.age = age;
    }
    // 生成
    var p1 = new Person();
    var p2 = new Person("name", 55);
</script>
  • 属性

    • obj.propName
    • obj[propName]
<script type="text/javascript">
    function Person(name, age) {
        // 属性
        this.name = name;
        this.age = age;
        // 関数
        this.info = function() {
            alert("info method!");
        }
    }
    var p = new Person("name", 30);
    for (propName in p) {
        document.writeln("属性" + propName + "の値 : " + p[propName] + "<br />");
    }
</script>
  • 継承(prototype属性)
<script type="text/javascript">
    // 定義
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.info = function() {
            document.writeln("name : " + this.name + "<br />");
            document.writeln("age : " + this.age + "<br />");
        }
    }
    // p1生成
    var p1 = new Person("name1", 30);
    p1.info();

    // prototype属性による拡張
    Person.prototype.walk = function() {
        document.writeln(this.name + "は歩いている <br />");
    }
    document.writeln("<hr />");
    // p2生成
    var p2 = new Person("name2", 30);
    p2.info();
    document.writeln("<hr />");
    p2.walk();
    // 動的に追加されているので、p1もwalk()メソッド実行可能
    p1.walk();
</script>

f:id:liguofeng29:20160207142730p:plain

  • オブジェクト生成

    • newキーワード : new Person()
    • new Object() : new Object()
    • JSON
<script type="text/javascript">
   // 生成
   var obj = new Object();
   // 属性追加
   obj.name = 'name';
   obj.age = 30;
</script>
<script type="text/javascript">
   // JSON定義
   var person =
   {
       // メンバ
       name : 'abc',
       age : 29 ,
       info : function() {
           document.writeln("name : " + this.name + "<br />" +
           "name : " + this.age + "<br />");
       }
   };
   person.info();
</script>