国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Javascript重溫OOP之面向對象

AbnerMing / 1085人閱讀

摘要:類的繼承建立繼承關系修改的指向調用父類方法調用父類的構造器調用父類上的方法封裝命名空間是沒有命名空間的,因此可以用對象模擬。參考資料面向對象

</>復制代碼

  1. 面向對象程序設計(Object-oriented programming,OOP)是一種程序設計范型,同時也是一種程序開發的方法。對象指的是類的實例。它將對象作為程序的基本單元,將程序和數據封裝其中,以提高軟件的重用性、靈活性和擴展性。——維基百科

一般面向對象包含:繼承,封裝,多態,抽象

對象形式的繼承 淺拷貝

</>復制代碼

  1. var Person = {
  2. name: "allin",
  3. age: 18,
  4. address: {
  5. home: "home",
  6. office: "office",
  7. }
  8. sclools: ["x","z"],
  9. };
  10. var programer = {
  11. language: "js",
  12. };
  13. function extend(p, c){
  14. var c = c || {};
  15. for( var prop in p){
  16. c[prop] = p[prop];
  17. }
  18. }
  19. extend(Person, programer);
  20. programer.name; // allin
  21. programer.address.home; // home
  22. programer.address.home = "house"; //house
  23. Person.address.home; // house

從上面的結果看出,淺拷貝的缺陷在于修改了子對象中引用類型的值,會影響到父對象中的值,因為在淺拷貝中對引用類型的拷貝只是拷貝了地址,指向了內存中同一個副本。

深拷貝

</>復制代碼

  1. function extendDeeply(p, c){
  2. var c = c || {};
  3. for (var prop in p){
  4. if(typeof p[prop] === "object"){
  5. c[prop] = (p[prop].constructor === Array)?[]:{};
  6. extendDeeply(p[prop], c[prop]);
  7. }else{
  8. c[prop] = p[prop];
  9. }
  10. }
  11. }

利用遞歸進行深拷貝,這樣子對象的修改就不會影響到父對象。

</>復制代碼

  1. extendDeeply(Person, programer);
  2. programer.address.home = "allin";
  3. Person.address.home; // home
利用call和apply繼承

</>復制代碼

  1. function Parent(){
  2. this.name = "abc";
  3. this.address = {home: "home"};
  4. }
  5. function Child(){
  6. Parent.call(this);
  7. this.language = "js";
  8. }
ES5中的Object.create()

</>復制代碼

  1. var p = { name : "allin"};
  2. var obj = Object.create(o);
  3. obj.name; // allin

Object.create()作為new操作符的替代方案是ES5之后才出來的。我們也可以自己模擬該方法:

</>復制代碼

  1. //模擬Object.create()方法
  2. function myCreate(o){
  3. function F(){};
  4. F.prototype = o;
  5. o = new F();
  6. return o;
  7. }
  8. var p = { name : "allin"};
  9. var obj = myCreate(o);
  10. obj.name; // allin

目前,各大瀏覽器的最新版本(包括IE9)都部署了這個方法。如果遇到老式瀏覽器,可以用下面的代碼自行部署。

</>復制代碼

  1.   if (!Object.create) {
  2.     Object.create = function (o) {
  3.        function F() {}
  4.       F.prototype = o;
  5.       return new F();
  6.     };
  7.   }
類的繼承 Object.create()

</>復制代碼

  1. function Person(name, age){}
  2. Person.prototype.headCount = 1;
  3. Person.prototype.eat = function(){
  4. console.log("eating...");
  5. }
  6. function Programmer(name, age, title){}
  7. Programmer.prototype = Object.create(Person.prototype); //建立繼承關系
  8. Programmer.prototype.constructor = Programmer; // 修改constructor的指向
調用父類方法

</>復制代碼

  1. function Person(name, age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. Person.prototype.headCount = 1;
  6. Person.prototype.eat = function(){
  7. console.log("eating...");
  8. }
  9. function Programmer(name, age, title){
  10. Person.apply(this, arguments); // 調用父類的構造器
  11. }
  12. Programmer.prototype = Object.create(Person.prototype);
  13. Programmer.prototype.constructor = Programmer;
  14. Programmer.prototype.language = "js";
  15. Programmer.prototype.work = function(){
  16. console.log("i am working code in "+ this.language);
  17. Person.prototype.eat.apply(this, arguments); // 調用父類上的方法
  18. }
封裝 命名空間

js是沒有命名空間的,因此可以用對象模擬。

</>復制代碼

  1. var app = {}; // 命名空間app
  2. //模塊1
  3. app.module1 = {
  4. name: "allin",
  5. f: function(){
  6. console.log("hi robot");
  7. }
  8. };
  9. app.module1.name; // "allin"
  10. app.module1.f(); // hi robot
靜態成員

</>復制代碼

  1. function Person(name){
  2. var age = 100;
  3. this.name = name;
  4. }
  5. //靜態成員
  6. Person.walk = function(){
  7. console.log("static");
  8. };
  9. Person.walk(); // static
私有與公有

</>復制代碼

  1. function Person(id){
  2. // 私有屬性與方法
  3. var name = "allin";
  4. var work = function(){
  5. console.log(this.id);
  6. };
  7. //公有屬性與方法
  8. this.id = id;
  9. this.say = function(){
  10. console.log("say hello");
  11. work.call(this);
  12. };
  13. };
  14. var p1 = new Person(123);
  15. p1.name; // undefined
  16. p1.id; // 123
  17. p1.say(); // say hello 123
模塊化

</>復制代碼

  1. var moduleA;
  2. moduleA = function() {
  3. var prop = 1;
  4. function func() {}
  5. return {
  6. func: func,
  7. prop: prop
  8. };
  9. }(); // 立即執行匿名函數

prop,func 不會被泄露到全局作用域。或者另一種寫法,使用 new

</>復制代碼

  1. moduleA = new function() {
  2. var prop = 1;
  3. function func() {}
  4. this.func = func;
  5. this.prop = prop;
  6. }
多態 模擬方法重載

arguments屬性可以取得函數調用的實參個數,可以利用這一點模擬方法的重載。

</>復制代碼

  1. function demo(a, b ){
  2. console.log(demo.length); // 得到形參個數
  3. console.log(arguments.length); //得到實參個數
  4. console.log(arguments[0]); // 第一個實參 4
  5. console.log(arguments[1]); // 第二個實參 5
  6. }
  7. demo(4, 5, 6);

</>復制代碼

  1. //實現可變長度實參的相加
  2. function add(){
  3. var total = 0;
  4. for( var i = arguments.length - 1; i >= 0; i--){
  5. total += arguments[i];
  6. }
  7. return total;
  8. }
  9. console.log(add(1)); // 1
  10. console.log(add(1, 2, 3)); // 7
  11. // 參數不同的情況
  12. function fontSize(){
  13. var ele = document.getElementById("js");
  14. if(arguments.length == 0){
  15. return ele.style.fontSize;
  16. }else{
  17. ele.style.fontSize = arguments[0];
  18. }
  19. }
  20. fontSize(18);
  21. console.log(fontSize());
  22. // 類型不同的情況
  23. function setting(){
  24. var ele = document.getElementById("js");
  25. if(typeof arguments[0] === "object"){
  26. for(var p in arguments[0]){
  27. ele.style[p] = arguments[0][p];
  28. }
  29. }else{
  30. ele.style.fontSize = arguments[0];
  31. ele.style.backgroundColor = arguments[1];
  32. }
  33. }
  34. setting(18, "red");
  35. setting({fontSize:20, backgroundColor: "green"});
方法重寫

</>復制代碼

  1. function F(){}
  2. var f = new F();
  3. F.prototype.run = function(){
  4. console.log("F");
  5. }
  6. f.run(); // F
  7. f.run = function(){
  8. console.log("fff");
  9. }
  10. f.run(); // fff
抽象類

在構造器中 throw new Error(""); 拋異常。這樣防止這個類被直接調用。

</>復制代碼

  1. function DetectorBase() {
  2. throw new Error("Abstract class can not be invoked directly!");
  3. }
  4. DetectorBase.prototype.detect = function() {
  5. console.log("Detection starting...");
  6. };
  7. DetectorBase.prototype.stop = function() {
  8. console.log("Detection stopped.");
  9. };
  10. DetectorBase.prototype.init = function() {
  11. throw new Error("Error");
  12. };
  13. // var d = new DetectorBase();// Uncaught Error: Abstract class can not be invoked directly!
  14. function LinkDetector() {}
  15. LinkDetector.prototype = Object.create(DetectorBase.prototype);
  16. LinkDetector.prototype.constructor = LinkDetector;
  17. var l = new LinkDetector();
  18. console.log(l); //LinkDetector {}__proto__: LinkDetector
  19. l.detect(); //Detection starting...
  20. l.init(); //Uncaught Error: Error
參考資料

JavaScript 面向對象

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/90832.html

相關文章

  • Javascript重溫OOPJS的解析與執行過程

    摘要:了解面向對象編程之前,首先要了解的執行順序。的解析過程分為兩個階段預處理階段與執行期。在執行階段的執行上下文對象由賦值為指向對應函數 了解js面向對象編程之前,首先要了解js的執行順序。js的解析過程分為兩個階段:預處理階段與執行期。 預處理階段 在預處理階段,js會首先創建一個執行上下文對象(Execute Context,然后掃描聲明式函數和用var定義的變量,將其加入執行上下文環...

    xumenger 評論0 收藏0
  • 重溫基礎】15.JS對象介紹

    摘要:構造函數通常首字母大寫,用于區分普通函數。這種關系常被稱為原型鏈,它解釋了為何一個對象會擁有定義在其他對象中的屬性和方法。中所有的對象,都有一個屬性,指向實例對象的構造函數原型由于是個非標準屬性,因此只有和兩個瀏覽器支持,標準方法是。 從這篇文章開始,復習 MDN 中級教程 的內容了,在初級教程中,我和大家分享了一些比較簡單基礎的知識點,并放在我的 【Cute-JavaScript】系...

    booster 評論0 收藏0
  • Javascript重溫OOP原型與原型鏈

    摘要:在構造函數中的中定義的屬性和方法,會被創建的對象所繼承下來。從上面的輸出結果看出,指向了其構造函數的,而本身也是一個對象,其內部也有屬性,其指向的是直到最后指向,這條原型鏈才結束。和都指向,說明原型鏈到終止。 prototype原型對象 每個函數都有一個默認的prototype屬性,其實際上還是一個對象,如果被用在繼承中,姑且叫做原型對象。 在構造函數中的prototype中定義的屬性...

    lindroid 評論0 收藏0
  • Javascript重溫OOP作用域與閉包

    摘要:的變量作用域是基于其特有的作用域鏈的。需要注意的是,用創建的函數,其作用域指向全局作用域。所以,有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。 作用域 定義 在編程語言中,作用域控制著變量與參數的可見性及生命周期,它能減少名稱沖突,而且提供了自動內存管理 --javascript 語言精粹 我理解的是,一個變量、函數或者成員可以在代碼中訪問到的范圍。 js的變量作...

    JessYanCoding 評論0 收藏0
  • Javascript重溫OOP類與對象

    摘要:對構造函數使用運算符,就能生成實例,并且變量會綁定在實例對象上。這個對象的所有屬性和方法,都會被構造函數的實例繼承。 對象 對象的含義 所謂對象,就是一種無序的數據集合,由若干個鍵值對(key-value)構成。 對象的創建 使用new運算符創建Object var p = new Object(); p.name = Tony; 使用對象字面量的形式 //對象字面量形...

    RancherLabs 評論0 收藏0

發表評論

0條評論

AbnerMing

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<