當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript中OOP——面向对象中的继承/闭包
生活随笔
收集整理的這篇文章主要介紹了
JavaScript中OOP——面向对象中的继承/闭包
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
? 前 ?言
?OOP?
JavaScript中OOP——>>>面向?qū)ο笾械睦^承/閉包
?
1.1面向?qū)ο蟮母拍?/strong>
使用一個子類繼承另一個父類，子類可以自動擁有父類的屬性和方法。
?? ?? >>> 繼承的兩方，發(fā)生在兩個類之間。
?
1.2JS模擬實(shí)現(xiàn)繼承的三種方式：
首先，了解一下call/apply/binb：通過函數(shù)名調(diào)用方法，強(qiáng)行將函數(shù)中的this指向某個對象；?? ??? ???? call寫法：? func.call(func的this指向的obj,參數(shù)1,參數(shù)2...);
?? ??? ???? apply寫法：? func.apply(func的this指向的obj,[參數(shù)1,參數(shù)2...]);
?? ??? ?? ??? binb寫法：? func.binb(func的this指向的obj)(參數(shù)1,參數(shù)2...);
?? ??? ??
?? ??? ??? call與apply的唯一區(qū)別：在于接收func函數(shù)的參數(shù)方式不同。call采用直接寫多個參數(shù)的方式，而apply采用是一個數(shù)組封裝所有參數(shù)。
?? ??? ?
① 擴(kuò)展Object實(shí)現(xiàn)繼承
?? ??? ??? 1：定義父類
?? ??? ? ?? ??? ??? ?function Parent(){}
?? ??? ?? ? 2：定義子類
?? ??? ??? ??? ??? ?funtion Son(){}
?? ??? ? ? 3：通過原型給Object對象添加一個擴(kuò)展方法。
?? ??? ??? ??? ??? ?Object.prototype.customExtend = function(parObj){
?? ??? ??? ??? ???????? for(var i in parObj){
?? ??? ??? ??? ??????? ??? ?// 通過for-in循環(huán)，把父類的所有屬性方法，賦值給自己
?? ??? ??? ??? ?????????? ??? ?this[i] = parObj[i];
?? ??? ??? ??? ???????? }
?? ??? ??? ??? ???? }
?? ??? ??? ? 4：子類對象調(diào)用擴(kuò)展方法
?? ??? ??? ??? ? ?? ?Son.customExtend(Parent);
?
① eg：1 // 1.定義父類 2 function Person(name,age){ 3 this.name = name; 4 this.age = age; 5 this.say = function(){ 6 alert(this.name+":"+this.age); 7 } 8 } 9 // 2.定義子類 10 function Student(no){ 11 this.no = no; 12 this.add = function(a,b){ 13 alert(a+b); 14 } 15 } 16 function Programmer(lang){ 17 this.lang = lang; 18 this.codding = function(){ 19 alert("我愛敲代碼！敲代碼使我快樂！"); 20 } 21 } 22 // 3.通過原型給Object對象添加一個擴(kuò)展方法。 23 Object.prototype.customExtend = function(parObj){ 24 for(var i in parObj){ 25 // 通過for-in循環(huán)，把父類的所有屬性方法，賦值給自己 26 this[i] = parObj[i]; 27 } 28 } 29 30 var p = new Person("小明","18"); 31 var s = new Student("0001"); 32 s.customExtend(p);//現(xiàn)在s繼承了p的所有屬性和方法。 33 console.log(s) 34 35 var pro = new Programmer("JavaScript"); 36 pro.customExtend(p); 37 console.log(pro) 38 39 40 41
?
?
② 使用call/apply/binb.
?? ??? ???????? 1：定義父類
?? ??? ??????? ??? ?funtion Parent(””,””,””){}
?? ??? ??? ??? ?2：定義子類
?? ??? ??? ??? ???? function Son(””,””,””){}
?? ??? ??? ??? ?3：在子類中通過call方法/apply/binb方法去調(diào)用父類。
?? ??? ??? ??? ???? function Son(){
?? ??? ??? ??? ??? ??? ?Parent.call(this,””,””,””);// Parent.apply(this,[””,””,””]);//Parent.binb(this)(””,””,””);
?? ??? ??? ??? ???? }
?
② eg：?
1 function Person(name,age){ 2 this.name = name; 3 this.age = age; 4 this.say = function(){ 5 alert("我叫："+this.name+";今年："+this.age+"歲"); 6 } 7 } 8 9 /** 文檔注釋，調(diào)用函數(shù)時，可以看到注釋內(nèi)容。 10 * 11 * no：學(xué)員編號 12 * stuName：學(xué)員姓名 13 * stuAge：學(xué)員年齡 14 */ 15 function Student(no,stuName,stuAge){ 16 17 this.no = no; 18 Person.call(this,stuName,stuAge); 19 // 執(zhí)行上述代碼，相當(dāng)于將下面的代碼執(zhí)行一遍。并且把原來Person類的this直接替換為Stundet的this(當(dāng)實(shí)例化Student時的那個對象) 20 21 // this.name = "張三"; 22 // this.age = 14; 23 // this.say = function(){ 24 // alert("我叫："+this.name+";今年："+this.age+"歲"); 25 // } 26 } 27 28 var stu = new Student(12,"zhangsan",14); 29 stu.say(); 30 31 console.log(stu) 32 33 //Person("zhangsan","123");?
?③ 使用原型繼承
?? ??? ???????? 1：定義父類
?? ??? ??????????? function Parent(””,””,””){}
?? ??? ??? ??? ?2：定義子類
?? ??? ??? ??? ??? function Son(””,””,””){}
?? ??? ??? ??? ?3：把在子類對象的原型對象聲明為父類的實(shí)例。
?? ??? ??? ??? ??? Son.prototype = new Parent(””,””,””);
?
③ eg：?
1 function Person(name,age){ 2 this.name = name; 3 this.age = age; 4 this.say = function(){ 5 alert("我叫："+this.name+";今年："+this.age+"歲"); 6 } 7 } 8 9 /** 文檔注釋，調(diào)用函數(shù)時，可以看到注釋內(nèi)容。 10 * 11 * no：學(xué)員編號 12 * stuName：學(xué)員姓名 13 * stuAge：學(xué)員年齡 14 */ 15 function Student(no){ 16 this.no = no; 17 } 18 19 Student.prototype = new Person("張三",14) 20 21 var stu = new Student(12); 22 23 stu.say(); 24 25 console.log(stu) 26 27 //Person("zhangsan","123");?
1.3面向?qū)ο笾械拈]包
1、 全局變量：函數(shù)外聲明的變量
?? ??? ????? 局部變量：函數(shù)內(nèi)聲明的變量
?? ??? ??
?? ??? ????? 在JS中，函數(shù)為唯一的局部作用域，而if、for等其他{}沒有自己的作用域
?? ??? ??
?? ??? ????? 所以，函數(shù)外不能訪問局部變量。其實(shí)，變量在函數(shù)執(zhí)行完畢以后，占用的內(nèi)存就被釋放。
?? ??? ??
?? ??? ?? 2、如何訪問函數(shù)私有變量？
?? ??? ????? JS中，提供了一種"閉包"的概念：在函數(shù)內(nèi)部，定義一個子函數(shù)，可以用子函數(shù)訪問父函數(shù)的私有變量。執(zhí)行完操作以后，將子函數(shù)通過return返回。
?? ??? ??
?? ??? ??? ? ?? ?function func2(){
?? ??? ??? ??? ??? ?var num = 1;
?? ??? ??? ??? ??? ?function func3(){
?? ??? ??? ??? ??? ??? ?var sum = num+10;
?? ??? ??? ??? ??? ??? ?alert(sum);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?return func3;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?var f = func2();
?? ??? ??? ??? ?f();
?? ??? ??
?? ??? ?? 3、閉包的作用：
?? ??? ????? ① 訪問函數(shù)的私有變量；
?? ??? ????? ② 讓函數(shù)的變量始終存在于內(nèi)存中，而不被釋放。
轉(zhuǎn)載于:https://www.cnblogs.com/zhuanzhibukaixin/p/6849230.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript中OOP——面向对象中的继承/闭包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html和css可以用在ssh里面么,在
- 下一篇： gradle idea java ssm