## 什么是原型
原型與原型鏈是學習JavaScript這門語言不能不理解的兩個重要概念,為什么?因為JavaScript是一門基于原型的語言。
怎么理解“JavaScript是一門基于原型的語言”?在軟件設計模式中,有一種模式叫做原型模式,JavaScript正是利用這種模式而被創建出來。先來了解下原型模式的概念:原型模式是用于創建重復的對象,同時又能保證性能。這種類型的設計模式屬于創建型模式,它提供了一種創建對象的最佳方式。這種模式是實現了一個原型接口,該接口用于創建當前對象的克隆。原型模式的目的是用原型實例指定創建對象的種類,并且通過拷貝這些原型創建新的對象。也就是說利用已有的一個原型對象,可以快速地生成和原型對象一樣的新對象實例。
原型:
原型到底是什么?原型是一個可以被復制(或者叫克隆)的一個類,通過復制原型可以創建一個一模一樣的新對象。通俗的說,原型就是一個模板,在設計語言中更準確的說是一個對象模板。
## 對象原型
當調用對象的屬性或者方法的時候,先去找對象本身的屬性/方法,如果對象沒有該屬性或方法,此時去調用原型中的屬性/方法.如果對象本身沒有該屬性/方法,原型中也沒有該屬性/方法,那么會報錯.
對象的__proto__等于 構造函數的 Person.prototype
__proto__屬性是非標準的,生產環境不要使用.
```
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.show = function () {
console.log(this.name);
}
var p1 = new Person('jack', 20);
console.log(p1.__proto__ === Person.prototype); //true __proto__就是對構造函數的prototype的引用
```
在原型對象中有一個屬性constructor,這個屬性就是構造函數.constructor的作用就是記錄了創建該對象的構造函數.我們想知道這個對象是什么類型,是什么構造函數創建的,通過它就可以知道對象的構造函數.
```
? Person(name, age) {
this.name = name;
this.age = age;
}
```
- 函數
- arguments
- 作用域
- 作用域鏈
- 預解析
- 對象
- 簡單類型和復雜類型
- 內置對象
- Web API
- DOM
- 獲取頁面元素
- 注冊事件及應用
- 點擊切換圖片
- 非表單元素的屬性
- 取消a標簽的默認行為
- 美女輪播圖
- innerText和innerHTML
- 表單元素的屬性
- 下拉框選中項
- 全選反選
- 自定義屬性
- mouseenter和mouseover區別
- 樣式操作及應用
- 操作樣式
- 鏈式操作原理
- 顯示隱藏二維碼
- 高亮正在輸入的文本框
- 隔行變色
- tab欄切換
- 常見dom操作
- 節點介紹及應用
- 模擬DOM
- 兄弟節點
- 獲取子節點
- 菜單
- 父子節點
- 動態創建元素及應用
- 動態創建元素
- 動態創建列表
- 動態創建表格
- 動態創建元素性能對比
- 常用元素操作方法
- 事件詳解
- 注冊事件的幾種方式
- addEventListener
- 移除事件
- 事件的三個階段
- 事件委托
- 事件對象1
- 事件對象2
- 事件對象3
- 圖片跟著鼠標移動
- 獲取鼠標在盒子中的坐標
- 獲取頁面滾動的距離
- 取消默認行為的執行
- 阻止事件冒泡
- input只能輸入數字
- BOM
- 概述
- 對話框
- JS加載詳解
- setTimeout
- setInterval
- 簡單動畫
- location
- history
- UserAgent
- offset,client,scroll
- offset系列屬性
- client系列屬性
- scroll系列屬性
- 拖拽案例
- 彈出登錄窗口
- 動畫函數封裝
- 高級
- 瀏覽器的組成
- 面向對象
- 概述
- 面向對象開發過程
- 創建對象
- new的時候發生了什么
- 靜態成員和實例成員
- 構造函數的原型
- 對象的原型
- 三者關系
- 原型鏈
- 屬性查找規則
- 注意點
- 擴展內置對象
- 繼承
- 原型繼承
- call
- 借用構造函數
- 組合繼承
- 函數進階
- 函數聲明和函數表達式
- 函數也是對象
- 函數調用方式和this指向
- call,bind,apply改變函數中的this
- AJAX
- 基礎知識
- 原生AJAX
- 同步與異步
- JS異步原理
- Node
- 模塊化
- 概述
- 模塊成員導出詳解
- ES6
- 解構賦值
- 字符串擴展
- 函數拓展
- 箭頭函數
- 類與繼承
- export default 和export
- Promise
- 回調函數
- 回調地獄
- promise基本概念
- Promosew實例只要被創建就立即執行里面的異步方法
- 使用then指定成功和失敗的回調
- promise正確使用方式
- 捕獲異常的兩種方式
- NPM和NRM
- WebPack
- 概述
- plugin配置和使用
- loader配置和使用
- webpack和vue結合
- webpack中導入和script標簽
- vue中結合render函數渲染指定組件到容器中
- 總結
- vue-router
- 跨域
- json
- jQuery
- 概述
- 注意
- dom對象和jquery對象互轉
- 選擇器
- 基礎選擇器
- 綁定事件
- 觸發器
- 事件對象
- 事件冒泡
- 取消事件冒泡
- HTML5新增API
- 檢測網絡狀態
- 全屏
- 文件讀取
- 地理定位
- 百度地圖名片
- 拖放
- 本地存儲
- 應用緩存
- 多媒體播放器布局