成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

__proto__ 和 prototype 會出現(xiàn)在什么地方?它們之間是什么關(guān)系?實現(xiàn)繼承依賴什么?

bang590 / 3382人閱讀

摘要:遞歸閉包原型繼承本文主要講解理清一些函數(shù)常用的知識點遞歸閉包是什么閉包使用場景什么是原型和原型鏈如何實現(xiàn)繼承繼承的原理,原文。當(dāng)訪問一個對象上的屬性時,先嘗試訪問自身上的屬性,再通過原型鏈嘗試訪問其構(gòu)造函數(shù)原型上的屬性。

遞歸、閉包、原型、繼承

本文主要講解、理清一些函數(shù)常用的知識點:遞歸、閉包是什么、閉包使用場景、什么是原型和原型鏈、如何實現(xiàn)繼承、繼承的原理,原文。

遞歸

函數(shù)的遞歸就是在函數(shù)中調(diào)用自身

舉一個實例,著名斐波那契數(shù)列如何求得,問題是這樣的:

第一個月初有一對剛誕生的兔子

第二個月之后(第三個月初)它們可以生育

每月每對可生育的兔子會誕生下一對新兔子

兔子永不死去

定義出來的數(shù)列是

我們需要求得 n 月有多少對兔子,通過遞歸算法可以求得

function fn(n) {
  return n < 2 ? 1 : fn(n - 1) + fn(n - 2)
}
var count = fn(30);
console.log(count);
閉包

什么是閉包?閉包就是函數(shù),它可以繼承并訪問自身所被聲明的函數(shù)作用域內(nèi)的變量。

function fn1 () {
  var a = "hello"
  function fn2 () {
    console.log(a)
  }
}
fn1() // 其中 fn2 就是閉包函數(shù)
閉包的使用場景

閉包有很多使用場景,以下舉例:

1. 私有變量
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

上述函數(shù),使用閉包創(chuàng)建私有變量 name,變量不可被外部直接操作、獲取,只能通過返回的接口控制。

2. 匿名自執(zhí)行函數(shù)

比如在開發(fā)頁面時,需要在頁面初始化時,你需要立即做一些操作,那么可以在頁面中使用匿名自執(zhí)行函數(shù),它會在 JS 引擎讀取到這部分代碼時就立即執(zhí)行。

// 在 title 上添加頁面打開時間
(function(){
  var openTime = new Date()
  document.title = document.title + openTime
})();  
原型、原型鏈、繼承

先問一個問題:__proto__ 和 prototype 會出現(xiàn)在什么地方?它們之間是什么關(guān)系?實現(xiàn)繼承依賴什么?

__proto__ 和 prototype 的區(qū)別

1.JavaScript 中每一個對象都擁有原型鏈(__proto__)指向其構(gòu)造函數(shù)的原型(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 中每一個函數(shù)都擁有原型(prototype),原型也是一個對象,這個對象包括:原型鏈、原型方法(屬性)、函數(shù)構(gòu)造,同理它的原型鏈指向其構(gòu)造函數(shù)的原型

function Person () {}
Person.prototype.getName = function () {}
Object.getOwnPropertyNames(Person.prototype) // ["constructor", "getName"]
Person.prototype.__proto__ === Object.prototype // true

3.當(dāng)訪問一個函數(shù)上的屬性時,先嘗試訪問自身上的屬性,再嘗試訪問其原型上的屬性。當(dāng)訪問一個對象上的屬性時,先嘗試訪問自身上的屬性,再通過原型鏈嘗試訪問其構(gòu)造函數(shù)原型上的屬性。如果沒有則通過原型上的原型鏈,繼續(xù)向上查找,直到訪問 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 函數(shù)通過原型和原型鏈實現(xiàn)繼承

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

上述代碼,描述了一個函數(shù)的經(jīng)典繼承,其工作原理是這樣的:

聲明父類 superA、子類 subA

重寫子類 subA 的原型,指向 superA 的實例

當(dāng)實例化 a1 時,a1.__proto__ => subA.prototype => new superA() => superA.prototype,所以 a1 的構(gòu)造函數(shù)是 superA

同時,運(yùn)行 subA 也就是 superA.call(this, "xiaomuchen"),其中 this 指向 a1 所以 a1 繼承了 name 屬性

這樣子類 subA 的實例 a1 就繼承了 superA 的原型方法和屬性

總結(jié)

本文概括了遞歸、閉包、原型、繼承,理清這些基本的概念,有助于你接納更多的東西,我們會在下一個章節(jié)對函數(shù)進(jìn)行更深入的討論。

作者:肖沐宸,github。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/89523.html

相關(guān)文章

  • 我對JavaScript對象的理解

    摘要:通過這種操作,就有了構(gòu)造函數(shù)的原型對象里的方法。你也看到了,就是一個普通對象,所以這種寄生式繼承適合于根據(jù)已有對象創(chuàng)建一個加強(qiáng)版的對象,在主要考慮通過已有對象來繼承而不是構(gòu)造函數(shù)的情況下,這種方式的確很方便。 原文地址在我的博客, 轉(zhuǎn)載請注明出處,謝謝! 標(biāo)簽: [es5對象、原型, 原型鏈, 繼承] 注意(這篇文章特別長)這篇文章僅僅是我個人對于JavaScript對象的理解,并不是...

    roadtogeek 評論0 收藏0
  • JavaScript原型鏈以及Object,F(xiàn)unction之間關(guān)系

    摘要:由于一般所有的原型鏈最終都會指向頂端的,所以它們都是的。好了現(xiàn)在了,成了所有對象原型鏈的。 JavaScript里任何東西都是對象,任何一個對象內(nèi)部都有另一個對象叫__proto__,即原型,它可以包含任何東西讓對象繼承。當(dāng)然__proto__本身也是一個對象,它自己也有自己的__proto__,這樣一級一級向上,就構(gòu)成了一個__proto__鏈,即原型鏈。當(dāng)然原型鏈不會無限向上,它有...

    zacklee 評論0 收藏0
  • JS基礎(chǔ)-原型、原型鏈真的不能一知半解

    摘要:原型鏈和對象的原型是對象實例和它的構(gòu)造函數(shù)之間建立的鏈接,它的值是構(gòu)造函數(shù)的。對象的原型根據(jù)上文提到的構(gòu)造調(diào)用函數(shù)的時候會創(chuàng)建一個新對象,自動將的原型指向構(gòu)造函數(shù)的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內(nèi)容,不少初學(xué)者甚至有一定經(jīng)驗的老鳥都不一定能完全說清...

    changfeng1050 評論0 收藏0
  • 淺析JavaScript中原型及constructor、__proto__、prototype的關(guān)系

    摘要:搞清了構(gòu)造函數(shù)和原型的區(qū)別后,就可以繼續(xù)了。指向構(gòu)造函數(shù)的原型對象,存在于實例與構(gòu)造函數(shù)的原型對象之間。要注意的是當(dāng)我們使用下面這種將整個重寫的情況時,會切斷構(gòu)造函數(shù)和原型之間的聯(lián)系,也就是說不再指向了,而是指向。 前言 先說一說為什么要搞清楚JavaScript的原型,因為這就是JS的根。JavaScript雖然不是一門傳統(tǒng)的面向?qū)ο笳Z言,但它有自己的類和繼承機(jī)制,最重要的就是它采用...

    wenzi 評論0 收藏0
  • 深入理解JavaScript

    摘要:深入之繼承的多種方式和優(yōu)缺點深入系列第十五篇,講解各種繼承方式和優(yōu)缺點。對于解釋型語言例如來說,通過詞法分析語法分析語法樹,就可以開始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優(yōu)缺點。 寫在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點。 但是注意: 這篇文章更像是筆記,哎,再讓我...

    myeveryheart 評論0 收藏0

發(fā)表評論

0條評論

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