Pelajari javascript berorientasikan objek dan kuasai 9 cara untuk mencipta kemahiran objects_javascript

Artikel ini berkongsi 9 cara untuk mencipta objek dalam JavaScript untuk rujukan anda. Kandungan khusus adalah seperti berikut

【1】Gunakan pembina Objek
[Kelemahan] Menggunakan antara muka yang sama untuk mencipta banyak objek akan menghasilkan banyak kod pendua

var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
  　　alert(this.name);
　　}

【2】Gunakan literal objek
[Kelemahan] Menggunakan antara muka yang sama untuk mencipta banyak objek akan menghasilkan banyak kod pendua

var person = {
  name: "Nicholas",
  age : 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};

【3】Corak kilang: Abstrak proses mencipta objek tertentu Memandangkan kelas tidak boleh dibuat dalam ECMAScript, pembangun mencipta fungsi untuk merangkum butiran mencipta objek dengan antara muka tertentu
. [Kelemahan] Ia menyelesaikan masalah mencipta berbilang objek serupa, tetapi tidak menyelesaikan masalah pengecaman objek

function createPerson(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayname = function(){
    alert(this.name);
  }
  return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');

【4】Mod pembina: Tiada objek dicipta secara eksplisit, atribut dan kaedah diperuntukkan terus kepada objek ini dan tiada penyataan pulangan
[Kelemahan] Setiap kaedah mesti dicipta semula pada setiap contoh

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.jog = job;
  this.sayName = function(){
    alert(this.name);
  };
  //与声明函数在逻辑上是等价的
  //this.sayName = new Function('alert(this.name)');

}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");

【4.1】Mod pengembangan pembina: pindahkan definisi fungsi di luar pembina
[Kelemahan 1] Fungsi yang ditakrifkan dalam skop global sebenarnya hanya boleh dipanggil oleh objek tertentu, yang menjadikan skop global agak tidak layak untuk namanya
[Kelemahan 2] Jika objek perlu mentakrifkan banyak kaedah, ia mesti mentakrifkan banyak fungsi global Jenis rujukan tersuai ini tidak mempunyai enkapsulasi sama sekali

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = sayName;
}
function sayName(){
  alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);

【5】Corak prototaip: Setiap fungsi yang kami cipta mempunyai atribut prototaip Atribut ini ialah penunjuk yang menunjuk ke objek, dan tujuan objek ini adalah untuk mengandungi maklumat yang boleh dikongsi oleh semua kejadian jenis tertentu. Sifat dan kaedah. Jika anda memahaminya secara literal, prototaip ialah objek prototaip contoh objek yang dibuat dengan memanggil pembina

function Person(){
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "software Engineer";
  Person.prototype.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true

【5.1】Mod prototaip yang lebih mudah: Untuk mengurangkan input yang tidak diperlukan dan merangkum fungsi prototaip secara visual dengan lebih baik, tulis semula keseluruhan objek prototaip dengan literal objek yang mengandungi semua sifat dan kaedah.
[Kelemahan] Menetapkan semula sifat pembina dengan cara ini akan menyebabkan atribut [[Enumerable]]nya ditetapkan kepada benar Sifat pembina asli tidak boleh dikira secara lalai

function Person(){};
Person.prototype = {
  constructor : Person,
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};

【5.2】Corak prototaip untuk menyelesaikan masalah terbilang

function Person(){};
Person.prototype = {
  name: "Nicholas",
  age: 29,
  job: "software Engineer",
  sayName : function(){
    alert(this.name);
  }
};
Object.defineProperty(Person.prototype,"constructor",{
  enumerable : false,
  value : Person
});

[Kelemahan Corak Prototaip 1] Mengatasi objek prototaip akan memutuskan sambungan antara prototaip sedia ada dan tika objek sedia ada, dan ia masih merujuk kepada prototaip asal.

function Person(){}
var friend = new Person();
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  }
};
friend.sayName();//error

[Kelemahan Corak Prototaip 2] Masalah perkongsian atribut jenis rujukan adalah menonjol

function Person(){}
Person.prototype = {
  constructor: Person,
  name: "Nicholas",
  age: 29,
  job: "Software Engineer",
  friend : ["shelby","Court"],
  sayName: function(){
    alert(this.name);
  }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true

【6】Corak gabungan: Menggabungkan corak pembina dan corak prototaip ialah cara paling biasa untuk mencipta jenis tersuai. Corak pembina digunakan untuk menentukan sifat contoh, manakala corak prototaip digunakan untuk menentukan kaedah dan sifat dikongsi. Mod campuran ini juga menyokong menghantar parameter kepada pembina dan merupakan mod lalai yang digunakan untuk menentukan jenis rujukan

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["shelby","Court"];
}
Person.prototype = {
  constructor: Person,
  sayName : function(){
    alert(this.name);
  }  
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true

【7】Mod prototaip dinamik: Merangkum semua maklumat dalam pembina, dan mulakan prototaip dalam pembina (hanya apabila perlu), sambil mengekalkan kelebihan menggunakan kedua-dua pembina dan prototaip. Dalam erti kata lain, anda boleh memutuskan sama ada untuk memulakan prototaip dengan menyemak sama ada kaedah sedia ada adalah sah.
[Nota] Apabila menggunakan mod prototaip dinamik, literal objek tidak boleh digunakan untuk mengatasi prototaip. Jika anda mengatasi prototaip apabila tika telah dibuat, anda akan memutuskan sambungan antara tika sedia ada dan tika baharu

function Person(name,age,job){
  //属性
  this.name = name;
  this.age = age;
  this.job = job;
  //方法
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      alert(this.name);
    };
  }
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

[8] Corak pembina parasit: Cipta fungsi yang hanya merangkum kod yang mencipta objek, dan kemudian mengembalikan objek yang baru dibuat

function Person(name,age,job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function(){
    alert(this.name);
  };
  return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

【Aplikasi Corak Pembina Parasit】Buat tatasusunan khas dengan kaedah tambahan. Oleh kerana pembina Array tidak boleh diubah suai secara langsung, corak ini boleh digunakan

function SpecialArray(){
  //创建数组
  var values = new Array();
  //添加值
  values.push.apply(values,arguments);
  //添加方法
  values.toPipedString = function(){
    return this.join('|');
  };
  //返回数组
  return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"  

[9] Corak pembina selamat: Objek yang dipanggil selamat merujuk kepada objek yang tidak mempunyai sifat awam dan kaedahnya tidak merujuk perkara ini. Objek stabil paling baik digunakan dalam sesetengah persekitaran keselamatan (yang melarang penggunaan ini dan baharu) atau untuk menghalang data daripada diubah suai oleh aplikasi lain.

function Person(name,age,job){
  //创建要返回的对象
  var o = new Object();
  //可以在这里定义私有变量和函数
  //添加方法
  o.sayName = function(){
    alert(name);
  };
  //返回对象
  return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"

Di atas ialah sembilan cara untuk mencipta objek dalam JavaScript. Saya harap ia akan membantu pembelajaran semua orang.