ホームページ > 記事 > ウェブフロントエンド > JavaScript オブジェクトを作成する新しい方法 Object.create()_javascript スキル

JavaScript オブジェクトを作成する新しい方法 Object.create()_javascript スキル

WBOYオリジナル: 2016-05-16 15:22:531299ブラウズ

Object.create() とは何ですか?
Object.create(proto [,propertiesObject ]) は、E5 で提案された新しいオブジェクト作成メソッドです。最初のパラメーターは、サブ関数でない場合は、null を渡すことができます。パラメータはオブジェクトの属性記述子です。このパラメータはオプションです。
例:

function Car (desc) {
  this.desc = desc;
  this.color = "red";
}
 
Car.prototype = {
  getInfo: function() {
   return 'A ' + this.color + ' ' + this.desc + '.';
  }
};
//instantiate object using the constructor function
var car = Object.create(Car.prototype);
car.color = "blue";
alert(car.getInfo());

結果は次のようになります:青色の未定義。

1.propertiesObject パラメータの詳細な説明: (デフォルトは false)
データ属性:

writable: 任意に書き込めるかどうか
構成可能: 削除できるかどうか、および変更できるかどうか
enumerable:
値: 値

プロパティへのアクセス:

get():
set():
を設定します

2. 例: 使い方は例を見てください。

<!DOCTYPE html>
<html>
<head>
  <title>yupeng's document </title>
  <meta charset="utf-8"/>
</head>
<body>
  <script type="text/javascript">

    var obj = {

      a:function(){
        console.log(100)
      },
      b:function(){
        console.log(200)
      },
      c:function(){
        console.log(300)
      }

    }

    var newObj = {};

    newObj = Object.create(obj,{
      t1:{
        value:'yupeng',
        writable:true
      },
      bar: {
        configurable: false,
        get: function() { return bar; },
        set: function(value) { bar=value }
      }
      
    })

    console.log(newObj.a());
    console.log(newObj.t1);
    newObj.t1='yupeng1'
    console.log(newObj.t1);
    newObj.bar=201;
    console.log(newObj.bar)
    
    function Parent() { }
    var parent = new Parent();
    var child = Object.create(parent, {
       dataDescriptor: {
        value: "This property uses this string as its value.",
        writable: true,
        enumerable: true
       },
       accessorDescriptor: {
        get: function () { return "I am returning: " + accessorDescriptor; },
        set: function (val) { accessorDescriptor = val; },
        configurable: true
       }
      });

    child.accessorDescriptor = 'YUPENG';
    console.log(child.accessorDescriptor);



    var Car2 = function(){
      this.name = 'aaaaaa'
    } //this is an empty object, like {}
    Car2.prototype = {
     getInfo: function() {
      return 'A ' + this.color + ' ' + this.desc + '.';
     }
    };

    var newCar = new Car2();
     
    var car2 = Object.create(newCar, {
     //value properties
     color:  { writable: true, configurable:true, value: 'red' },
     //concrete desc value
     rawDesc: { writable: true, configurable:true, value: 'Porsche boxter' },
     // data properties (assigned using getters and setters)
     desc: { 
      configurable:true, 
      get: function ()   { return this.rawDesc.toUpperCase(); },
      set: function (value) { this.rawDesc = value.toLowerCase(); } 
     }
    }); 
    car2.color = 'blue';
    console.log(car2.getInfo());
    car2.desc = "XXXXXXXX";
    console.log(car2.getInfo());
    console.log(car2.name);



  </script>
</body>
</html>

結果は次のとおりです:
100
ユペン
ユペン1
201
帰ります: YUPENG
青いポルシェボクター
。青い XXXXXXXX
。ああああ

上記は、JavaScript の新しいオブジェクト作成メソッドである Object.create() の詳細な紹介であり、皆様の学習に役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：OpenLayers3 を使用してマップの右クリック menu_javascript スキルを追加する次の記事：OpenLayers3 を使用してマップの右クリック menu_javascript スキルを追加する

続きを見る

JavaScript オブジェクトを作成する新しい方法 Object.create()_javascript スキル

関連記事