摘要:遞歸閉包原型繼承本文主要講解理清一些函數常用的知識點遞歸閉包是什么閉包使用場景什么是原型和原型鏈如何實現繼承繼承的原理,原文。當訪問一個對象上的屬性時,先嘗試訪問自身上的屬性,再通過原型鏈嘗試訪問其構造函數原型上的屬性。
遞歸、閉包、原型、繼承
本文主要講解、理清一些函數常用的知識點:遞歸、閉包是什么、閉包使用場景、什么是原型和原型鏈、如何實現繼承、繼承的原理,原文。
遞歸函數的遞歸就是在函數中調用自身
舉一個實例,著名斐波那契數列如何求得,問題是這樣的:
第一個月初有一對剛誕生的兔子
第二個月之后(第三個月初)它們可以生育
每月每對可生育的兔子會誕生下一對新兔子
兔子永不死去
定義出來的數列是
我們需要求得 n 月有多少對兔子,通過遞歸算法可以求得
function fn(n) { return n < 2 ? 1 : fn(n - 1) + fn(n - 2) } var count = fn(30); console.log(count);閉包
什么是閉包?閉包就是函數,它可以繼承并訪問自身所被聲明的函數作用域內的變量。
function fn1 () { var a = "hello" function fn2 () { console.log(a) } } fn1() // 其中 fn2 就是閉包函數閉包的使用場景
閉包有很多使用場景,以下舉例:
function Person(){ var name = "default"; return { getName : function(){ return name; }, setName : function(newName){ name = newName; } } }; var person = Person() console.log(person.getName()) // default person.setName("xiaomuchen") console.log(person.getName()) // xiaomuchen var person2 = Person() console.log(person2.getName()) // default
上述函數,使用閉包創建私有變量 name,變量不可被外部直接操作、獲取,只能通過返回的接口控制。
比如在開發頁面時,需要在頁面初始化時,你需要立即做一些操作,那么可以在頁面中使用匿名自執行函數,它會在 JS 引擎讀取到這部分代碼時就立即執行。
// 在 title 上添加頁面打開時間 (function(){ var openTime = new Date() document.title = document.title + openTime })();原型、原型鏈、繼承
先問一個問題:__proto__ 和 prototype 會出現在什么地方?它們之間是什么關系?實現繼承依賴什么?
1.JavaScript 中每一個對象都擁有原型鏈(__proto__)指向其構造函數的原型(prototype)
var a = {} a.__proto__ === Object.prototype // true function Person () {} Person.__proto__ === Function.prototype // true var p = new Person() p.__proto__ === Person.prototype // true
2.JavaScript 中每一個函數都擁有原型(prototype),原型也是一個對象,這個對象包括:原型鏈、原型方法(屬性)、函數構造,同理它的原型鏈指向其構造函數的原型
function Person () {} Person.prototype.getName = function () {} Object.getOwnPropertyNames(Person.prototype) // ["constructor", "getName"] Person.prototype.__proto__ === Object.prototype // true
3.當訪問一個函數上的屬性時,先嘗試訪問自身上的屬性,再嘗試訪問其原型上的屬性。當訪問一個對象上的屬性時,先嘗試訪問自身上的屬性,再通過原型鏈嘗試訪問其構造函數原型上的屬性。如果沒有則通過原型上的原型鏈,繼續向上查找,直到訪問 Object.prototype 上的屬性,如果還是沒有,因為 Object.prototype 是一個沒有 __proto__ 的對象,則查詢到此為止,返回 undefined。
function Person () {} Person.getName = function () { console.log("Person1") } Person.prototype.getName = function () { console.log("Person2") } var p = new Person() Person.getName() // Person1 p.getName() // Person2 console.log(typeof p.getClass) // undefined
JavaScript 函數通過原型和原型鏈實現繼承
function superA (name) { this.name = name } superA.prototype.getName = function () { console.log(this.name) } function subA (name) { superA.call(this, name) // 繼承屬性 } subA.prototype = new superA() // 繼承方法 var a1 = new subA("xiaomuchen") a1.getName() // xiaomuchen
上述代碼,描述了一個函數的經典繼承,其工作原理是這樣的:
聲明父類 superA、子類 subA
重寫子類 subA 的原型,指向 superA 的實例
當實例化 a1 時,a1.__proto__ => subA.prototype => new superA() => superA.prototype,所以 a1 的構造函數是 superA
同時,運行 subA 也就是 superA.call(this, "xiaomuchen"),其中 this 指向 a1 所以 a1 繼承了 name 屬性
這樣子類 subA 的實例 a1 就繼承了 superA 的原型方法和屬性
總結本文概括了遞歸、閉包、原型、繼承,理清這些基本的概念,有助于你接納更多的東西,我們會在下一個章節對函數進行更深入的討論。
作者:肖沐宸,github。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89523.html
摘要:通過這種操作,就有了構造函數的原型對象里的方法。你也看到了,就是一個普通對象,所以這種寄生式繼承適合于根據已有對象創建一個加強版的對象,在主要考慮通過已有對象來繼承而不是構造函數的情況下,這種方式的確很方便。 原文地址在我的博客, 轉載請注明出處,謝謝! 標簽: [es5對象、原型, 原型鏈, 繼承] 注意(這篇文章特別長)這篇文章僅僅是我個人對于JavaScript對象的理解,并不是...
摘要:由于一般所有的原型鏈最終都會指向頂端的,所以它們都是的。好了現在了,成了所有對象原型鏈的。 JavaScript里任何東西都是對象,任何一個對象內部都有另一個對象叫__proto__,即原型,它可以包含任何東西讓對象繼承。當然__proto__本身也是一個對象,它自己也有自己的__proto__,這樣一級一級向上,就構成了一個__proto__鏈,即原型鏈。當然原型鏈不會無限向上,它有...
摘要:原型鏈和對象的原型是對象實例和它的構造函數之間建立的鏈接,它的值是構造函數的。對象的原型根據上文提到的構造調用函數的時候會創建一個新對象,自動將的原型指向構造函數的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內容,不少初學者甚至有一定經驗的老鳥都不一定能完全說清...
摘要:搞清了構造函數和原型的區別后,就可以繼續了。指向構造函數的原型對象,存在于實例與構造函數的原型對象之間。要注意的是當我們使用下面這種將整個重寫的情況時,會切斷構造函數和原型之間的聯系,也就是說不再指向了,而是指向。 前言 先說一說為什么要搞清楚JavaScript的原型,因為這就是JS的根。JavaScript雖然不是一門傳統的面向對象語言,但它有自己的類和繼承機制,最重要的就是它采用...
摘要:深入之繼承的多種方式和優缺點深入系列第十五篇,講解各種繼承方式和優缺點。對于解釋型語言例如來說,通過詞法分析語法分析語法樹,就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎,再讓我...
閱讀 2571·2021-11-22 09:34
閱讀 932·2021-11-19 11:34
閱讀 2801·2021-10-14 09:42
閱讀 1472·2021-09-22 15:27
閱讀 2385·2021-09-07 09:59
閱讀 1731·2021-08-27 13:13
閱讀 3432·2019-08-30 11:21
閱讀 771·2019-08-29 18:35