cari
Rumahhujung hadapan webtutorial jsNota kajian JavaScript: Mencipta kemahiran objects_javascript

JavaScript mempunyai objek terbina dalam seperti Date, Array, String, dsb., yang berkuasa dan mudah digunakan, dan semua orang menyukainya, bagaimanapun, apabila berurusan dengan beberapa logik yang kompleks, objek terbina dalam sangat tidak berkuasa , dan pembangun selalunya perlu menyesuaikan objek .

Menurut takrifan JavaScript, objek ialah koleksi sifat tidak tertib dan sifatnya boleh mengandungi nilai asas, objek atau fungsi. Maksudnya, objek ialah satu set atribut tanpa susunan tertentu Setiap atribut dipetakan kepada nilai, iaitu satu set pasangan nilai kunci Nilai boleh menjadi data atau objek.

Objek ialah jenis data asas JavaScript. Dalam JavaScript, nilai selain daripada rentetan, nombor, benar, palsu, batal, dan tidak ditentukan adalah objek. Oleh itu, sangat sukar untuk meneruskan pembelajaran JavaScript tanpa memahami objek. Mula belajar tentang objek hari ini.

Ikhtisar

Objek ialah jenis data asas dalam JavaScript Dari segi struktur data, ia adalah jadual cincang, yang boleh dianggap sebagai koleksi atribut yang tidak tertib, kecuali nilai asal. Nilai ini diakses melalui nama harta, yang boleh berupa sebarang rentetan termasuk aksara nol. Secara ringkasnya, objek ialah koleksi atribut Setiap atribut mengandungi nama (kunci) dan nilai (nilai).

Untuk memahami maksud objek JavaScript, anda boleh memikirkannya dengan cara ini. Dalam JavaScript, objek ialah entiti konkrit dengan sifat. Ambil gadis yang anda lihat Gadis ini adalah objek Dia mempunyai sifatnya sendiri. Contohnya, ketinggian, umur, nama gadis itu, dsb. Begitu juga, dalam JavaScript, sifat juga boleh digunakan untuk menentukan ciri objek.

Buat objek

Oleh kerana anda ingin mempelajari objek, anda mesti mempunyai objek terlebih dahulu Kemudian timbul persoalan, bagaimana untuk mencipta objek dalam JavaScript? Seterusnya, mari kita lihat cara membuat objek dalam JavaScript.

Banyak buku tentang JavaScript memperkenalkan kaedah penciptaan objek, terutamanya termasuk:

Gunakan literal objek untuk mencipta objek (nilai-kunci)

Gunakan baharu untuk mencipta objek

Gunakan Object.create() untuk mencipta objek

Gunakan fungsi untuk mencipta objek

Buat objek menggunakan prototaip

Buat objek menggunakan literal objek

Objek literal ialah bentuk termudah untuk mencipta objek. Ia bertujuan untuk memudahkan proses mencipta objek yang mengandungi sejumlah besar sifat. Objek literal ialah jadual pemetaan yang terdiri daripada pasangan nama atribut (kunci) dan nilai atribut (nilai). , Keseluruhan Jadual pemetaan disertakan dalam pendakap kerinting ({}).

Sintaks untuk mencipta objek melalui literal objek adalah seperti berikut:

var obj = {
property_1: value_1, // property_# 可能是一个标识符...
2: value_2, // 或者是一个数字
// ...,
"property n": value_n // 或是一个字符串
};

Di sini obj ialah nama objek yang dicipta, setiap property_i ialah pengecam (boleh jadi nama, nombor atau rentetan literal), dan setiap value_i ialah nilainya, dan nilai ini diberikan kepada property_i. Mari lihat contoh khusus:

var girl = {
'name': '欣欣',
'age' : 18,
'height': 175,
'weight': 45
}

Contoh ini mencipta objek bernama gadis Objek mempunyai empat atribut: nama, umur, tinggi dan berat. Empat atribut ini sepadan dengan nilai atribut.

Apabila mencipta objek menggunakan literal objek, jika anda membiarkan pendakap kerintingnya ({}) kosong, anda boleh menentukan objek yang mengandungi sifat dan kaedah lalai sahaja. Seperti:

var obj = {}

Apabila menggunakan objek yang dibuat dengan cara ini, anda boleh mencipta atribut objek untuk obj objek melalui titik (.), iaitu, obj.key dan menetapkan nilai atribut objek. Selain itu, anda juga boleh mencipta atribut objek untuk obj objek melalui kurungan segi empat sama ([]), iaitu, obj['key'] dan menetapkan nilai atribut objek. Sebagai contoh di bawah:

var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

Apabila mencetak objek gadis dalam Chrome, hasil output adalah seperti berikut:

console.log(girl);
//Object {name: "欣欣", age: 18, height: 175, weight: 45}

Gunakan baharu untuk mencipta objek

Anda juga boleh mencipta objek dengan menggunakan operator baharu diikuti dengan pembina Objek (lebih lanjut mengenai pembina kemudian):

var obj = new Object(); // Sama seperti obj = {}

Walaupun obj ialah objek kosong dalam keadaan awal, ahli boleh ditambah dan digunakan secara dinamik dengan mudah dalam JavaScript, jadi kami boleh terus menambah pembolehubah dan kaedah ahli. Seperti:

var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

Gunakan Object.create() untuk mencipta objek

Objek juga boleh dibuat menggunakan kaedah Object.create(). Kaedah ini berguna kerana ia membolehkan anda memilih objek prototaip untuk objek yang dicipta tanpa menentukan pembina.

Kaedah Object.create() mencipta objek dengan prototaip yang ditentukan dan beberapa sifat yang ditentukan.

Object.create(proto, [ propertiesObject ])

Kaedah Object.create() mencipta objek dan menerima dua parameter Parameter pertama ialah proto objek proto bagi objek ini; Kaedah ini sangat mudah digunakan:

var obj1 = Object.create({
x: 1,
y: 2
}); //对象obj1继承了属性x和y
var obj2 = Object.create(null); //对象obj2没有原型

如果 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 异常。
有关于Object.create()方法更多的示例可以点击这里进行了解。

使用函数创建对象

在实际使用当中,字面量创建对象虽然很有用,但是它并不能满足我们的所有需求,我们希望能够和其他后台语言一样创建一个类,然后声明类的实例就能够多次使用,而不用每次使用的时候都要重新创建它。

因为JavaScript没有类,一般都是使用函数来定义一个类似其他语言中的类格式,比如:

function Person() {
this.name = "mary"; // 为这个类添加一个成员变量name,并为这个成员变量赋默认值
this.age = 5;
this.sayHello = function () {
console.log(this.name + " : " + this.age);
};
}

定义好类之后,我们就可以像下面这样创建和使用对象:

var person1 = new Person();
person1.name = 'Tom';
person1.age = 20;
person1.sayHello(); // Tom : 20
var person2 = new Person();
person2.name = 'W3cplus';
person2.age = 5;
person2.sayHello(); // W3cplus : 5

Person()函数不是用来被调用的,它是用来被new用的。

通过原型创建对象

这种方法比较前几种方法来说算是最为复杂,最为高级的方法。这里还涉及到封装的一些知识(有关于这些后续学习到了再记录)。这里简单看看如何通过原型创建对象。

首先像函数方法创建对象一样,先定义一个函数:

function Person() {
this.name = "W3cplus";
this.age = 5;
this.walk = function () {
console.log("一个前端网站...");
};
}

然后在外部可以扩允成员:

//添加成员方法
Person.prototype.sayHello = function () {
console.log("hello");
};
//也可以添加成员属性,
Person.prototype.height = 100;

一方面,原型可以扩充原有类的功能(特别是添加有用方法),也可以像下面这样写:

function Person() { }
Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
console.log("一个前端网站...");
};
Person.prototype.sayHello = function () {
console.log("hello");
};
Person.prototype.height = 100;

属性访问

对象属性访问一般有两种方法,第一种是使用点(.)表示法,这也是最常用的一种方法,也是很多面向对象语言中通用的语法。第二种方法还可以使用中括号([])表示法来访问对象的属性。在使用中括号语法时,应该将要访问的属性以字符串的形式放在中括号中。如下:

person['name'];
person.name;

从功能上来说,上面两种方法访问对象属性没有任何区别。但中括号语法的主要优点有两个:

可能通过变量访问属性,如下:

var propertyName = 'name';
person[propertyName];

另外一个优点是,如果属性名中包含了会导致语法错误的字符或者属性名使用的是关键字或保留字,可以使用中括号访问属性,如下:

person['first name'];

一般情况之下,除非必须使用亦是来访问对象属性,否则建议使用点(.)的方法来访问对象属性。

总结

对象是JavaScript的基本数据类型,如果要更好的往下学习JavaScript相关的知识,很有必要先把对象整明白。这篇主要介绍了几种创建对象的方法。较为简单的是通过字面量({})和new Object()方法创建,但这两种方法创建的对象复用性较差;使用Object.create()创建对象时不需要定义一个构造函数就允许你在对象中选择其原型对象。除了这几种方法还可以使用函数和原型创建对象,而这两种方法相对来说可复用性强,只是使用较为复杂。

有关JavaScript学习笔记之创建对象的知识小编就给大家介绍到这里,希望对大家有所帮助!

Kenyataan
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
Ganti aksara rentetan dalam javascriptGanti aksara rentetan dalam javascriptMar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

8 plugin susun atur halaman jquery yang menakjubkan8 plugin susun atur halaman jquery yang menakjubkanMar 06, 2025 am 12:48 AM

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

Bina Aplikasi Web Ajax anda sendiriBina Aplikasi Web Ajax anda sendiriMar 09, 2025 am 12:11 AM

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Kandungan kotak beban secara dinamik menggunakan ajaxKandungan kotak beban secara dinamik menggunakan ajaxMar 06, 2025 am 01:07 AM

Tutorial ini menunjukkan membuat kotak halaman dinamik yang dimuatkan melalui AJAX, membolehkan Refresh Instant tanpa tambah nilai halaman penuh. Ia memanfaatkan JQuery dan JavaScript. Fikirkannya sebagai loader kotak kandungan gaya Facebook tersuai. Konsep Utama: Ajax dan JQuery

10 JQuery Fun and Games Plugin10 JQuery Fun and Games PluginMar 08, 2025 am 12:42 AM

10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game

Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScriptCara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScriptMar 06, 2025 am 01:18 AM

Perpustakaan JavaScript ini memanfaatkan Window.Name Property untuk menguruskan data sesi tanpa bergantung pada kuki. Ia menawarkan penyelesaian yang mantap untuk menyimpan dan mengambil pembolehubah sesi di seluruh pelayar. Perpustakaan menyediakan tiga kaedah teras: sesi

JQuery Parallax Tutorial - Latar Belakang Header AnimasiJQuery Parallax Tutorial - Latar Belakang Header AnimasiMar 08, 2025 am 12:39 AM

Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),