原型和閉包

原型和閉包

一切皆對象

一切皆對象(類型值除外)

undefined, number, string, boolean屬于簡單的值類型

函數、數組、對象、new Number(10)都是對象。他們都是引用類型

Null是基本數據類型,不是引用數據類型
基本數據類型的值就是它本身的值,引用數據類型是存放的對這個對象引用的指針,Null本身的值就是Null,所以不是引用類型

不同的對象在底層都表示為二進制,在 JavaScript 中二進制前三位都為 0 的話會被判
斷為 object 類型, null 的二進制表示是全 0,自然前三位也是 0,所以執行 typeof 時會返回“ object ”。

http://www.cnblogs.com/xiaoheimiaoer/p/4572558.html

判斷值類型的類型用typeof,引用類型的類型用instanceof

javascript為弱類型,里一切皆是對象,對象里面都是屬性,而它的方法也是一種屬性,用鍵值對的形式來表示,且javascript中的對象可以隨意擴展屬性,沒有class的約束。

簡單示例

var a1={b:10,c:function(n){alert(this.a+n);},d:{car:"000000",long:"五十"}
};

雖然函數是一種對象,但函數和對象那個之間更像是一種相互生成的關系

對象都由函數來創建,我們平時所寫的var let等其實是一種“語法糖”其本質還是函數

prototype原型

每一個函數都有一個屬性叫prototype

prototype的屬性值是一個對象,只有一個默認的叫constructor屬性,指向函數本身,而還我們可以自己采用自定義的形式在prototype中新增自己的屬性

function F1(){}
F1.prototype.age="1982";
F1.prototype.sex=function(){return "man";
};

而這樣做的作用就要聯系到jQuery了

var $("div");
$div.attr('myAge','18');

上面代碼中,$('div')返回的是一個對象,而對象被函數創建的而他的實現過程如下

myjQuery.prototype.attr=function(){};
$('div')=new myjQuery();

其本質就是

function F1(){}
F1.prototype.age="1982";
F1.prototype.sex=function(){return "man";
};
var f2=new F1();
console.log(f2.age);
console.log(f2.sex());

F1是一個函數,f2對象是從F1函數new出來的,這樣f2對象就可以調用F1.prototype中的屬性。

因為每個對象都有一個隱藏的屬性——“proto”,這個屬性引用了創建這個對象的函數的prototype。即:

f2.__proto__ === F1.prototype

這里的"______proto_______"成為“隱式原型”

__ proto__ 原型

每個函數function都有一個prototype,即原型。同時每個對象都有一個__ proto__

其指向創建該對象的函數的prototype

個__ proto __是一個隱藏的屬性,javascript不希望開發者用到這個屬性值,有的低版本瀏覽器甚至不支持這個屬性值

自定義函數的prototype都是被Object創建,所以它的_ _proto__指向的就是Object.prototype

但是Object.prototype確實一個特例——它的__ proto__指向的是null,切記切記

函數也有原型

function fn(x,y){return x+y;
};
console.log(fn(10,20));var f1= new Function("x","y","return x+y;");
console.log(f1(8,7));

第二種為new Function僅作理解使用,Function作為函數,也是一種對象,所以也有 __ proto__ 屬性,而函數本身是被Function創建,所以Function是被自身創建,他的 __ proto __指向了自身的Prototype。

同理Function.prototype指向的對象,它的__ proto __也指向Object.prototype

instanceof

instanceof 用于對引用類型的判斷img

Instanceof的判斷隊則是:

function Foo(){}
var f1=new Foo();console.log(f1 instanceof Foo);//true
console.log(f1 instanceof Object);//true

設第一個變量為A,設第二個函數為B

沿著A的__ proto__這條線來找,同時沿著B的prototype這條線來找,如果兩條線能找到同一個引用,即同一個對象,那么就返回true。如果找到終點還未重合,則返回false

將前面的整合為整體如下圖,通過此圖,可以捋清為何返回值為true了

img

其實instanceof表示的就是一種繼承關系,或者原型鏈的結構

繼承

javascript中的繼承是通過原型鏈來體現的

js是原型繼承,C#是類型繼承。
原型繼承比類型繼承更加靈活,但是又不如類型繼承可控

function foo(){}
var f1=new foo();f1.a=10;Foo.prototype.a=100;
Fpp.prototype.b=200;console.log(f1.a);//10
console.log(f1.b);//200

f1是Foo函數new出來的對象f1.a是f1對象的基本屬性而非。b從Foo.prototype得來

f1.__ proto __指向的是Foo.prototype

**訪問一個對象的屬性時,先在基本屬性中查找,如果沒有,再沿著__ proto__這條鏈向上找,這就是原型鏈 **

img

訪問f1.b時,f1的基本屬性中沒有b,于是沿著__ proto__找到了Foo.prototype.b

可使用hasOwnProperty區分一個屬性是基本屬性還是原型

原型的靈活性

對象屬性可以隨時改動

在對象或函數new出來后可以隨時加屬性

繼承方法不合適也可以隨時修改

缺少你所要用的方法時,可以隨時去創建

執行上下文

  • 變量、函數表達式——變量聲明,默認賦值為undefined;
  • this——賦值;
  • 函數聲明——賦值;

這三種數據的準備情況我們稱之為“執行上下文”或者“執行上下文環境”。

函數每被調用一次,都會產生一個新的執行上下文環境。因為不同的調用可能就會有不同的參數

另外一點不同在于,函數在定義的時候(不是調用的時候),就已經確定了函數體內部自由變量的作用域

大白話理解:在執行代碼之前,把將要用到的所有的變量都事先拿出來,有的直接賦值了,有的先用undefined占個空

了解了執行上下文環境中的數據信息,你就不用再去死記硬背那些可惡的面試題了

this

? 在函數中this到底取何值,是在函數真正被調用執行的時候確定的,函數定義的時候確定不了,因為this的取值是執行上下文環境的一部分,每次調用函數,都會產生一個新的執行上下文環境。

  1. 構造函數

    所謂構造函數就是用來new對象的函數。其實嚴格來說,所有的函數都可以new一個對象,但是有些函數的定義是為了new一個對象,而有些函數則不是。另外注意,構造函數的函數名第一個字母大寫(規則約定)

  2. 函數作為對象的一個屬性

    如果函數作為對象的一個屬性時,并且作為對象的一個屬性被調用時,函數中的this指向該對象

  3. 函數用call或者apply調用

    當一個函數被call和apply調用時,this的值就取傳入的對象的值。

  4. 全局 & 調用普通函數

    全局環境下,this永遠是window

    普通函數在調用時,其中的this也都是window

其實,不僅僅是構造函數的prototype,即便是在整個原型鏈中,this代表的也都是當前對象的值。

執行上下文棧

? 執行全局代碼時,會產生一個執行上下文環境,每次調用函數都又會產生執行上下文環境。當函數調用完成時,這個上下文環境以及其中的數據都會被消除,再重新回到全局上下文環境。處于活動狀態的執行上下文環境只有一個。

其實這是一個壓棧出棧的過程——執行上下文棧img

作用域

通常大家認為“javascript沒有塊級作用域”。所謂“塊”,就是大括號“{}”中間的語句

javascript除了全局作用域之外,只有函數可以創建的作用域。

? 所以,我們在聲明變量時,全局代碼要在代碼前端聲明,函數中要在函數體一開始就聲明好。除了這兩個地方,其他地方都不要出現變量聲明。而且建議用“單var”形式

作用域有上下級的關系,上下級關系的確定就看函數是在哪個作用域下創建的

作用域最大的用處就是隔離變量,不同作用域下同名變量不會有沖突

作用域在函數定義時就已經確定了。而不是在函數調用時確定

? 作用域只是一個“地盤”,一個抽象的概念,其中沒有變量。要通過作用域對應的執行上下文環境來獲取變量的值。同一個作用域下,不同的調用會產生不同的執行上下文環境,繼而產生不同的變量的值。所以,作用域中變量的值是在執行過程中產生的確定的,而作用域卻是在函數創建時就確定了。

所以,如果要查找一個作用域下某個變量的值,就需要找到這個作用域對應的執行上下文環境,再在其中尋找變量的值

自由變量到作用域鏈

將變量在作用域外聲明在作用域中調用的變量為自由變量

要到創建這個函數的那個作用域中取值——是“創建”,而不是“調用”,無論函數將在哪里調用

閉包

閉包,可理解為:函數作為返回值,函數作為參數傳遞

有些情況下函數在被調用完后其上下文環境不會被銷毀,如返回值唯一個函數,函數的特別之處在于可以創建一個獨立的作用域

使用閉包會增加內容開銷,只有在所有閉包相關作用域執行完畢后才會銷毀

圖片來源于網絡

轉載于:https://www.cnblogs.com/baiyang2292/p/11175619.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248506.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248506.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248506.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python 排序算法

冒泡排序: 1 #coding:utf-82 3 比較相鄰的元素,每一趟交換后,最后的元素是最大的。4 第一次比較n-1次,第二次比較n-2次。。。第n-1次比較1次5 進行n-1次冒泡次數6 最優時間復雜度O(n),最壞時間復雜度O(n^2)7 8 9 def bubble_sort…

獎勵 CSDN 社區的領軍人物

設計動機 領軍人物榜單在這里:https://blog.csdn.net/rank/list/role CSDN 是中國 IT 人士學習、成長、成功的平臺, 這個平臺有很多博主, 博主寫的很多優秀文章獲得了粉絲。 那么, 博主獲得粉絲之后, 博主以粉絲為榮…

一文教會你何為重繪、回流?

文章目錄css圖層圖層創建的條件重繪(Repaint)回流觸發重繪的屬性觸發回流的屬性常見的觸發回流的操作優化方案requestAnimationFrame----請求動畫幀寫在最后學習目標: 了解前端Dom代碼、css樣式、js邏輯代碼到瀏覽器展現過程了解什么是圖層了解重繪與回流了解前端層…

mockjs中的方法(三)

1)Mock.mock(); Mock.mock( url, type, template, function(options) ); 其中 url 是定義我們要請求的 url 地址,以便于我們請求的時候 mock 去進行攔截,知道我們要去請求那個值;但是它也是可選的,而且格式…

js函數、js對象的這些點你真的懂嗎?

本篇學習目標 ?了解函數(高級)原型原型鏈概念\textcolor{green}{了解函數(高級)原型原型鏈概念}了解函數(高級)原型原型鏈概念 ?掌握函數作用域\textcolor{green}{掌握函數作用域}掌握函數作用域 ?掌握…

前端處理跨域的幾種方式

什么是跨域&#xff1f; 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源&#xff0c;這里跨域是廣義的。 廣義的跨域&#xff1a; 1、資源跳轉&#xff1a;A鏈接、重定向、表單提交 2、資源嵌入&#xff1a; <link>、<script>、<img>、<frame&g…

程序員必知的緩存套圖

文章目錄1. 線程與進程1.1 進程:1.2. 線程:1.3. 關系2. 瀏覽器內核模塊組成4. 事件循環機制5. 緩存5.1. 緩存理解5.2. 緩存分類5.3. 緩存使用示意圖5.4. 緩存中的header參數1. 線程與進程 1.1 進程: 進程是計算機中的程序關于某數據集合上的一次運行活動&#xff0c;是系統進…

安裝webpack及使用

前言 你是否也是只會運用框架中集成好的Webpack配置呢&#xff1f;你明白每一項的意義么&#xff1f;你懂多少Webpack的個性化配置項呢&#xff1f;本篇文章為你講解Webpack中的各種配置項參數及作用&#xff01; 文章目錄了解Webpack相關開啟項目編譯打包應用使用webpack配置…

Python基礎-os模塊 sys模塊

sys模塊 與操作系統交互的一個接口 文件夾相關 os.makedirs(dirname1/dirname2) 可生成多層遞歸目錄os.removedirs(dirname1) 若目錄為空&#xff0c;則刪除&#xff0c;并遞歸到上一級目錄&#xff0c;如若也為空&#xff0c;則刪除&#xff0c;依此類推os.mkdir(dirnam…

php單例型(singleton pattern)

搞定&#xff0c;吃飯 <?php /* The purpose of singleton pattern is to restrict instantiation of class to a single object. It is implemented by creating a method within the class that creates a new instance of that class if one does not exist. If an obje…

開啟關閉各種服務

開啟&關閉 Mac版 查找被占用的8080端口&#xff0c;根據pid殺掉進程 查找8080端口 losf -i:8080 根據pid殺掉進程 kill -9 pid iMac:~ acui$ lsof -i:8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 62948 ting 93u IPv6 0x6697d6…

助你提高效率的幾個Vue指令

前言 很多使用Vue的同學往往最容易忽略的指令&#xff0c;由于在這里考慮到很多初學甚至還沒有開始接觸Vue的同學呢&#xff0c;在介紹v-clos之前呢就先以大家都熟知的v-model編寫小demo v-model 相信大家對v-model并不陌生&#xff0c;簡單來講他就是用于在表單控件以及組建…

掌握Mock擺脫后端同學的束縛

文章目錄前言Mock概述mock.js安裝Mock規范Mock的使用總結前言 當下采用前后端分離模式開發Web應用已經成為氣候&#xff0c;在開發階段有一個不成文的規定則是 項目開發后端先行 但是作為前端開發工程師的我們&#xff0c;難道在搭建完頁面后只能等待后端的接口么&#xff1f;…

戶外鞋簡介

. 單論品牌&#xff08;主要以登山鞋及徙步鞋為主&#xff09;&#xff1a; 高級品牌&#xff1a;SCARPA、ASOLO、MONTRAIL、ZAMBERLAN、vasque、Lowa、La Sportiva 價格都較高&#xff0c;單價都在千元以上&#xff0c;品質一流&#xff0c;做工精細。 中檔品牌&#xff1a;Tr…

Vue技能樹上線啦

前言 前端現在越來越多樣化&#xff0c;語言眾多&#xff0c;大家使用的框架也比較雜&#xff0c;在廣泛的前端技術棧面前我唯愛Vue&#xff08;僅代表個人觀點勿噴小伙伴們&#xff09;可能很多人覺得我是因為簡單&#xff0c;其實并不然&#xff0c;我嘗試過很多框架&#x…

ES6的新特性(8)——數組的擴展

數組的擴展 擴展運算符 含義 擴展運算符&#xff08;spread&#xff09;是三個點&#xff08;...&#xff09;。它好比 rest 參數的逆運算&#xff0c;將一個數組轉為用逗號分隔的參數序列。 console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5[…

《SpringMVC從入門到放肆》一、概述

一、SpringMVC概述 ViewServiceDaoDBSpring MVCinterfaceinterfaceMysqlimplsimplsSpringMVC也叫Spring web mvc&#xff0c;屬于表現層框架。SpringMVC是Spring框架的一部分&#xff0c;是在Spring3.0后發布的。 二、第一個SpringMVC程序功能描述&#xff1a;  用戶提交一個…

手握流量密碼,萬粉不是夢

前言 可能大家來到CSDN的目的初衷都是不一樣的&#xff0c;像我注冊CSDN的時候完全是為了解決自己項目中的各種問題&#xff0c;能夠有一個為我提供正確答案、正確解決方案的一個平臺&#xff0c;簡單的了解后我選擇CSDN&#xff0c;直到成為現在的創作者也說明我的選擇是對的…

秋季學期學習總結

轉載于:https://www.cnblogs.com/zx666/p/10408950.html

一文帶你了解React框架

前言 由于 React的設計思想極其獨特&#xff0c;屬于革命性創新&#xff0c;性能出眾&#xff0c;代碼邏輯卻非常簡單。所以&#xff0c;越來越多的人開始關注和使用&#xff0c;認為它可能是將來 Web 開發的主流工具。 這個項目本身也越滾越大&#xff0c;從最早的UI引擎變成…