[toc]
> ### 寫一個構造函數,生成一個實例
```js
// 構造函數
function Person(name, age) {
this.name = name;
this.age = age;
}
// xu 是通過構造函數 new 出的一個實例
var xu = new Person('xu', 19);
```
> ### 構造函數
>
`console.log(Person);
`

> ### 原型
`console.log(Person.prototype);
`

> ### 實例的` __proto__`,其實就是原型
>
`console.log(xu.__proto__);
`

> ### 實例的原型的構造器,其實就是構造函數
`console.log(xu.__proto__.constructor);
`

>構造函數Person === 實例的原型的構造器
`console.log(Person === xu.__proto__.constructor); // true
`
> ### 在原型上定義一個方法
```
Person.prototype.add = function(a, b) {
console.log(a + b);
}
// xu.__proto__.reduce = function(a, b)
xu.__proto__.constructor.prototype.reduce = function (a, b) {
console.log(a - b);
}
xu.add(1, 2);
xu.reduce(1, 2);
```
> ### __proto__和prototype
`__proto__` 是實例具有的屬性,指向原型
`prototype` 是構造函數具有的屬性,可以直接通過`構造函數.prototype.函數名 = function(){}` 在原型上添加方法
> ### 獲取某個原型, Object.getPrototypeOf(obj)
```js
console.log(Object.getPrototypeOf(xu));
```

> ### 原型鏈
1. 什么是原型鏈
讀取對象的某個屬性時,JavaScript引擎先尋找對象本身的屬性,如果找不到,就到它的原型去找,如果還是找不到,就到原型的原型去找。如果直到最頂層的Object.prototype還是找不到,則返回undefined。這個過程就叫原型鏈
2. 原型鏈的特點:
- 如果對象自身和它的原型,都定義了一個同名屬性,那么優先讀取對象自身的屬性,這叫做“覆蓋”(overiding)。
- 一級級向上在原型鏈尋找某個屬性,對性能是有影響的。所尋找的屬性在越上層的原型對象,對性能的影響越大。如果尋找某個不存在的屬性,將會遍歷整個原型鏈。
- constructor屬性是原型對象上的一個屬性,可以被所有實例對象所共享。要注意的是,prototype是構造函數的屬性,而constructor則是構造函數的prototype屬性所指向的那個對象,也就是原型對象的屬性。由于constructor屬性是一種原型對象和構造函數的關系,所以在修改原型對象的時候,一定要注意constructor的指向問題。
- instanceof運算符返回一個布爾值,用于判斷對象是否為某個構造函數的實例。
3. 判斷對象的固有屬性
```
Obj.hasOwnProperty('add')
```
- JavaScript
- 1. DOM事件流
- 2. 模擬 new, Object create(), bind
- 5. 封裝函數進行字符串駝峰命名的轉換
- 6. 什么是promise
- 7. 判斷一個數是否為數組
- 10. __proto__和prototype以及原型,原型鏈,構造函數
- 11. 繼承
- 12. 閉包
- 13. 回調函數
- 14. var 和 let 區別
- 15. this、bind、call、apply
- 16.undefined和null的區別
- 17.內存泄漏
- 18.垃圾回收機制
- html css
- 1. 元素垂直水平居中
- 2. 清除浮動
- 3. bootstrap柵格系統
- 4. px rpx em rem vw 的區別
- 5. 兩種盒子模型
- 6. 合集
- web類
- 1. html5的新特性以及理解(web標簽語義化)
- 2. 什么是路由,關于前端路由和后端路由
- 3. 對優質代碼的理解
- 4. cookie 和 sessionStorage和localStorage
- 5. 瀏覽器內核
- 6. http 狀態碼
- 7. href 和 src 的區別
- 8. link 和 @import 的區別
- 9. http 狀態碼
- 10. websocket
- 11. 瀏覽器解析url
- 12.http緩存
- vue
- 1.vue2和vue3有哪些區別
- 1. 對 mvvvm 的理解
- 2. mvvm的優缺點
- 3. 數據雙向綁定的原理
- 4. 生命周期
- 5. 組件如何通信
- 6. computed和watch的區別
- 7. proxy 和 Object.defineProperty
- 8. 虛擬dom和 diff算法
- 9. 路由的嵌套與傳參
- 10. 路由導航鉤子
- 11. axios 的理解
- 12. vue自定義指令 diretive
- 13. diff 的實現
- 14. 實現一個簡單的雙向綁定
- 15. 為什么 data 是一個函數
- 題譜
- js
- 手寫篇
- css
- vue
- react
- 算法
- 自我介紹
- 八股文
- 源項目地址
- 1.計算機網絡
- 2.瀏覽器
- 3.html和css
- 4.javascript
- 6.typescript
- 7.vue
- 8.react
- 大廠面試
- 面試題大全
- 常見性能優化
- 面試實戰
- 面試分析
- 押題
- 1.微前端在項目中的實際應用
- 2.性能優化
- vue相關
- 1.說一說HashRouter和HistoryRouter的區別和原理
- 無敵之路,牛客網面試題自測記錄
- 前端基礎
- 1.html
- 2.js基礎
- 珠峰性能優化
- WebWorker
- url到渲染
- 瀏覽器加載機制
- 自我介紹1
- 手寫題
- 1.compose
- 2.setTimeout模擬setInterval
- 3.手寫數組拍平
- 4.手寫promise.all
- 5.手寫深拷貝
- webpack
- 實戰