Cara baharu untuk mencipta objek javascript Object.create()_javascript kemahiran

WBOY
Lepaskan: 2016-05-16 15:22:53
asal
1310 orang telah melayarinya

Apakah itu Object.create()?
Object.create(proto [, propertiesObject ]) ialah kaedah penciptaan objek baharu yang dicadangkan dalam E5 Parameter pertama ialah prototaip yang akan diwarisi Jika ia bukan sub-fungsi, anda boleh melepasi null parameter Parameter ialah deskriptor atribut bagi objek Parameter ini adalah pilihan.
Contohnya:

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());

Salin selepas log masuk

Hasilnya ialah:Biru tidak ditentukan.

1. Penjelasan terperinci tentang propertiesObject parameter: (lalai adalah palsu)
Atribut data:

  • boleh ditulis: sama ada ia boleh ditulis sewenang-wenangnya
  • boleh dikonfigurasikan: sama ada ia boleh dipadamkan dan sama ada ia boleh diubah suai
  • boleh dikira: sama ada ia boleh dikira menggunakan untuk dalam
  • nilai: nilai

Akses sifat:

  • get(): akses
  • set(): Set

2. Contoh: Lihat sahaja contoh untuk mengetahui cara menggunakannya.

<!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>

Salin selepas log masuk

Hasilnya ialah:
100
yupeng
yupeng1
201
Saya kembali: YUPENG
Sebuah BOXTER PORSCHE berwarna biru
Biru XXXXXXXX
aaaaa

Di atas ialah pengenalan terperinci kepada Object.create(), kaedah penciptaan objek baharu dalam JavaScript saya harap ia akan membantu pembelajaran semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan