[toc]
> ### 写一个构造函数,生成一个实例
```js
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// xu 是通过构造函数 new 出的一个实例
var xu = new Person('xu', 19);
```
> ### 构造函数
>
`console.log(Person);
`
![](https://box.kancloud.cn/b83b0453d387f6896c48afb4e5282e86_205x56.png)
> ### 原型
`console.log(Person.prototype);
`
![](https://box.kancloud.cn/cb7ba1ac67490de8fd2eedb7fa01aee9_254x83.png)
> ### 实例的` __proto__`,其实就是原型
>
`console.log(xu.__proto__);
`
![](https://box.kancloud.cn/cb7ba1ac67490de8fd2eedb7fa01aee9_254x83.png)
> ### 实例的原型的构造器,其实就是构造函数
`console.log(xu.__proto__.constructor);
`
![](https://box.kancloud.cn/b83b0453d387f6896c48afb4e5282e86_205x56.png)
>构造函数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));
```
![](https://box.kancloud.cn/912583503e756f5bc7892cc8d7728549_299x84.png)
> ### 原型链
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
- 实战