Rumah  >  Artikel  >  hujung hadapan web  >  JS berorientasikan objek (3) Kelas objek, sifat statik, penutupan, sifat peribadi, penggunaan panggilan dan aplikasi, tiga kaedah pelaksanaan kemahiran inheritance_javascript

JS berorientasikan objek (3) Kelas objek, sifat statik, penutupan, sifat peribadi, penggunaan panggilan dan aplikasi, tiga kaedah pelaksanaan kemahiran inheritance_javascript

WBOY
WBOYasal
2016-05-16 15:13:411419semak imbas

1.Kelas objek

Dalam JS, Object ialah kelas asas bagi semua kelas Apabila menggunakan kelas Object untuk mencipta objek tersuai, anda tidak perlu mentakrifkan pembina (pembina, prototaip, hasOwnProperty(property))

var per = new Object();
per.name = 'zhangsan';
per.age = ;
alert(per.name + per.age);

Kami ingin mendapatkan pembolehubah objek dalam program, selagi ia boleh menyimpan sejumlah besar data Pada masa ini, kami boleh mempertimbangkan untuk menggunakan kelas Objek. Kelas Objek mengelakkan definisi pembina. Satu lagi sifat yang biasa digunakan di bawah kelas Objek: hasOwnProperty

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert('具有email');
}else{
alert('无email');
}

2. Atribut statik

Dalam sesetengah bahasa berorientasikan objek, anda boleh menggunakan kata kunci statik untuk menentukan sifat statik atau kaedah statik kelas, yang boleh disimulasikan dalam JS.

Sintaks:

Nama kelas.Nama Atribut

Nama kelas.Attribute=function(){}

function Person(){
}
Person.count = ;
var p = new Person();
Person.count++;
var p = new Person();
Person.count++;
var p = new Person();
Person.count++;
alert(Person.count);

Tambah sifat statik dan kaedah statik:

function Person(){
Person.count++; //静态属性
Person.getCount=function(){ //静态方法
alert('当前共有' + Person.count + '个人');
}
}
Person.count = ;
var p = new Person();
var p = new Person();
var p = new Person();
Person.getCount();

3. Penutupan

Konsep: Apa yang dipanggil penutupan merujuk kepada ungkapan (biasanya fungsi) yang mempunyai banyak pembolehubah dan persekitaran yang terikat pada pembolehubah ini, jadi pembolehubah ini juga merupakan sebahagian daripada ungkapan.

Tanya soalan:

function display(){
var i=; 
}
display();
//在这里,想访问局部变量i

Dalam dunia global, pembolehubah tempatan i tidak boleh diakses kerana skopnya berbeza, dan selepas fungsi paparan dilaksanakan, pembolehubah tempatan i akan dikitar semula. Fungsi penutupan: "akses pembolehubah tempatan" dan "halang memori yang diduduki oleh pembolehubah daripada dikeluarkan"

//例
function fn(){
function fn(){
alert('hello');
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

Melalui Contoh 1, kita tahu bahawa pembolehubah boleh menunjuk ke alamat pertama fungsi, dan fungsi juga boleh mengembalikan alamat pertama fungsi lain.

//例
function fn(){
var i = ;
function fn(){
alert(i);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

Kita tahu daripada Contoh 2: Gunakan fungsi tolak untuk memasukkan pembolehubah i, supaya ingatan pembolehubah tempatan i tidak akan dituntut semula.

//例
function fn(){
var i = ;
function fn(){
alert(i++);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();
test();
test();

Dalam Contoh 3, kerana ingatan i tidak akan dituntut semula, nilai i akan menjadi +1 setiap kali fn2 dipanggil. Hasil daripada operasi ialah 10 timbul, 11 timbul, dan 12 timbul.

Prinsip penutupan: Dalam Contoh 3, terdapat tiga skop: skop global, skop fn1, skop fn2. Terdapat test=fn1() dalam skop global Sebenarnya, ayat ini bersamaan dengan test=fn2. Terdapat var i=10 dan kembalikan fn2 dalam skop fn1, dan amaran(i++) dalam skop fn2. Apabila test=fn1() di bawah skop global dilaksanakan, ujian menunjukkan kepada skop fn2 Pada masa ini, i di bawah skop fn2 disambungkan oleh skop global Menurut peraturan rantaian skop, i tidak ditakrifkan di bawah fn2 , jadi saya mencari skop atas untuk i di bawah fn2, dan mendapati var i=10 di bawah skop fn1. Oleh itu, ujian global mengaitkan i bagi fn2, dan i bagi fn2 mengaitkan i bagi fn1, jadi fn1 tidak akan dikitar semula selepas berjalan.

4. Atribut peribadi

Dalam pemikiran berorientasikan objek, sesetengah ahli sensitif yang tidak mahu didedahkan kepada umum boleh ditakrifkan sebagai peribadi, dan fungsi ini boleh disimulasikan dalam JavaScript.

Sintaks:

function Person(p_name){
var name = p_name;
this.age
}

var: peribadi

ini: awam

function Person(p_name,p_age){
this.name = p_name;
var age = p_age;
}
var p = new Person('zhangsan',);
alert(p.name);
alert(p.age);

Dalam contoh di atas, kami ingin menggunakan var untuk mewakili sifat ahli persendirian, tetapi selepas pembina Orang dilaksanakan, umur akan dikitar semula dan tidak boleh digunakan sebagai harta ahli.

function Person(p_name,p_age){
this.name = p_name;
var age = p_age;
this.setAge=function(a){
age = a;
}
this.getAge=function(){
return(age);
}
}
var p = new Person('zhangsan',);
p.setAge();
alert(p.getAge());

Dua kaedah this.setAge dan this.getAge menggunakan umur pembolehubah setempat, jadi umur tidak akan dikitar semula.

Jika hanya terdapat kaedah yang ditetapkan, ini bermakna atribut tersebut ialah atribut tulis sahaja.

Jika terdapat kaedah get sahaja, ini bermakna atribut tersebut ialah atribut baca sahaja.

5. Penggunaan panggilan dan memohon

Fungsi panggilan dan gunakan: panggil fungsi semasa menggunakan objek yang ditentukan. Fungsi panggilan dan guna adalah sama, tetapi ia mempunyai sintaks yang sedikit berbeza.

Sintaks:

panggil([thisObj[,arg1[,arg2[,argN]]]])

Parameter pertama: ini menunjuk kepada siapa apabila fungsi itu dilaksanakan

Parameter selepas

: nyatakan

mengikut urutan mengikut keperluan

mohon([thisObj[,argArray]])

Parameter pertama: ini menunjuk kepada siapa apabila fungsi itu dilaksanakan

Parameter kedua: tatasusunan, menunjukkan set parameter

Dalam js, fungsi mempunyai beberapa bentuk panggilan:

Person(); //Person内的this指向window
var p=new Person(); //Person内的this指向p
per.Person(); //Person内的this指向per
function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function speak(){
alert(this.name + this.age);
}
var p = new Person('zhangsan',);
//speak(); 这样调用this指向window
//p.speak(); p对象没有speak属性

Gunakan panggilan dan mohon untuk membuat panggilan

function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function speak(){
alert(this.name + this.age);
}
var p = new Person('zhangsan',);
speak.call(p);
speak.apply(p);

panggil dan gunakan lakukan dua perkara semasa melaksanakan: 1) arahkan ini ke dalam fungsi ke parameter pertama 2) panggil fungsi

Juga: Anda juga boleh menyelesaikan masalah seperti ini:

P1.katakan=cakap;

P1.say();

Penyelesaian ini pada asasnya berbeza daripada penyelesaian di atas:

Penyelesaian di atas adalah untuk memanggil fungsi bercakap secara langsung, tetapi penunjuk ini di dalam fungsi berubah.

Penyelesaian berikut akan menambah atribut pada objek p1, dan "isipadu" objek p1 akan menjadi lebih besar.

Contoh:

<script>
function fn(){
this.style.color='red';
}
function fn(){
this.style.fontSize='px';
}
window.onload=function(){
document.getElementById('btn').onclick=function(){
var div = document.getElementById('div');
fn.call(div);
fn.apply(div);
};
};
</script>
<div id='div'>hello javascript</div>
<input type='button' id='btn' value='确定'>

6.继承的三种实现方法

概念:在有些面向对象语言中,可以使用一个类(子类)继承另一个类(父类),子类可以拥有父类的属性和方法,这个功能可以在js中进行模拟。

三种方法:

第一种:扩展Object方法

Object.prototype.方法=function(父类对象){
for(var i in 父类对象){
this[i] = 父类对象[i];
} 
};

举例说明:

Object.prototype.ext=function(parObject){
//循环遍历父类对象所有属性
for(var i in parObject){
//为子类对象添加这个遍历到的属性
//它的值是父类对象这个属性的属性值
this[i] = parObject[i];
}
}
function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.say=function(){
alert(this.no+this.name_this.age);
}
}
var stu = new Student();
stu.ext(new Person('xiaoqiang',));
stu.speak();
stu.say();

第二种:使用call和apply方法

语法:

父类构造器.call(this,.......);

function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no,p_name,p_age){
this.no=p_no;
this.say=function(){
alert(this.name+this.age+this.no);
}
Person.call(this,p_name,p_age);
}
var stu = new Student(,'zhagsan',);
stu.speak();
stu.say();

第三种:原型继承

语法:

子类.prototype = new 父类();

function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.say=function(){
alert(this.name+this.age+this.no);
}
}
Student.prototype = new Person('wangwu',);
var stu = new Student();
stu.speak();
stu.say();

以上内容给大家介绍了JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法,希望对大家有所帮助!

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