前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 基础进阶

    • 基础篇
    • 进阶篇
    • 高频篇
    • 手写篇
    • 综合题型
      • 一、创建对象和原型链
        • 1 面向对象的三大特性
          • 1.1 原型链的知识
        • 2 创建对象有几种方法
          • 2.1 方式一:字面量
          • 2.2 方式二:通过构造函数
          • 2.3 方法三:Object.create
        • 3 原型、构造函数、实例,以及原型链
          • 3.1 原型、构造函数、实例三者之间的关系
          • 3.2 原型链
          • 3.3 instanceof的原理
          • 3.4 分析一个问题
        • 4 new 运算符
      • 二、面向对象
        • 1 前言
        • 2 类的定义、实例化
          • 2.1 类的定义/类的声明
          • 2.2 实例化
        • 3 继承的几种方式
          • 3.1 方式一:借助构造函数
          • 3.2 方法二:通过原型链实现继承
          • 3.3 方式三:组合的方式:构造函数 + 原型链
      • 三、DOM事件总结
      • 四、Event Loop详细版
        • 为什么 GUI 渲染线程为什么与 JS 引擎线程互斥
        • 从 Event Loop 看 JS 的运行机制
        • 什么是宏任务
        • 什么是微任务
        • 总结
      • 五、CSS盒模型及BFC
      • 六、页面布局
      • 七、安全问题:CSRF和XSS
        • 1 前言
        • 2 CSRF
          • 2.1 CSRF的基本概念、缩写、全称
          • 2.2 CSRF的攻击原理
          • 2.3 CSRF如何防御
        • 3 XSS
          • 3.1 XSS的基本概念
          • 3.2 XSS的攻击原理
          • 3.3 XSS的攻击方式
          • 3.4 XSS的防范措施(encode + 过滤)
        • 4 CSRF 和 XSS 的区别
      • 八、跨域通信类
        • 1 前言
        • 2 同源策略的概念和具体限制
        • 3 前后端如何通信
        • 4 如何创建Ajax
          • 4.1 发送 Ajax 请求的五个步骤(XMLHttpRequest的工作原理)
          • 4.2 发送 get 请求和 post 请求
          • 4.3 onreadystatechange 事件
          • 4.4 事件的触发条件
          • 4.5 事件的触发顺序
          • 4.6 实际开发中用的 原生Ajax请求
        • 5 跨域通信的几种方式
          • 5.1 JSONP
          • 5.2 WebSocket
          • 5.3 CORS
          • 5.4 Hash
          • 5.5 postMessage()方法
      • 九、前端错误监控
        • 1 前言
        • 2 前端错误的分类
        • 3 每种错误的捕获方式
          • 3.1 即时运行错误的捕获方式
          • 3.2 资源加载错误的捕获方式
        • 4 错误上报的两种方式
      • 十、HTTP协议
        • 1 前言
        • 2 HTTP协议的主要特点
          • 2.1 简单快速
          • 2.2 灵活
          • 2.3 无连接
          • 2.4 无状态
        • 3 HTTP报文的组成部分
          • 3.1 请求报文包括:
          • 3.2 响应报文包括:
        • 4 HTTP方法
        • 5 get 和 post的区别
        • 6 http状态码
        • 7 持久链接/http长连接
        • 8 长连接中的管线化
          • 8.1 管线化的原理
          • 8.2 管线化的注意事项
    • 其他问题
    • 设计模式
  • 精选模块

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

本篇对一些知识点查漏补缺

# 一、创建对象和原型链

# 1 面向对象的三大特性

  • 封装
  • 继承
  • 多态

# 1.1 原型链的知识

原型链是面向对象的基础,是非常重要的部分。有以下几种知识:

  • 创建对象有几种方法
  • 原型、构造函数、实例、原型链
  • instanceof的原理
  • new 运算符

# 2 创建对象有几种方法

# 2.1 方式一:字面量

    var obj11 = {name: 'smyh'};
    var obj12 = new Object(name: `smyh`); //内置对象(内置的构造函数)
@前端进阶之旅: 代码已经复制到剪贴板

上面的两种写法,效果是一样的。因为,第一种写法,obj11会指向Object。

  • 第一种写法是:字面量的方式。
  • 第二种写法是:内置的构造函数

# 2.2 方式二:通过构造函数

    var M = function (name) {
        this.name = name;
    }
    var obj3 = new M('smyhvae');
@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 方法三:Object.create

    var p = {name:'poetry'};
    var obj3 = Object.create(p);  //此方法创建的对象,是用原型链连接的
@前端进阶之旅: 代码已经复制到剪贴板

第三种方法,很少有人能说出来。这种方式里,obj3是实例,p是obj3的原型(name是p原型里的属性),构造函数是Object 。

# 3 原型、构造函数、实例,以及原型链

PS:任何一个函数,如果在前面加了new,那就是构造函数。

# 3.1 原型、构造函数、实例三者之间的关系

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 基础进阶

    • 基础篇
    • 进阶篇
    • 高频篇
    • 手写篇
    • 综合题型
      • 一、创建对象和原型链
        • 1 面向对象的三大特性
          • 1.1 原型链的知识
        • 2 创建对象有几种方法
          • 2.1 方式一:字面量
          • 2.2 方式二:通过构造函数
          • 2.3 方法三:Object.create
        • 3 原型、构造函数、实例,以及原型链
          • 3.1 原型、构造函数、实例三者之间的关系
          • 3.2 原型链
          • 3.3 instanceof的原理
          • 3.4 分析一个问题
        • 4 new 运算符
      • 二、面向对象
        • 1 前言
        • 2 类的定义、实例化
          • 2.1 类的定义/类的声明
          • 2.2 实例化
        • 3 继承的几种方式
          • 3.1 方式一:借助构造函数
          • 3.2 方法二:通过原型链实现继承
          • 3.3 方式三:组合的方式:构造函数 + 原型链
      • 三、DOM事件总结
      • 四、Event Loop详细版
        • 为什么 GUI 渲染线程为什么与 JS 引擎线程互斥
        • 从 Event Loop 看 JS 的运行机制
        • 什么是宏任务
        • 什么是微任务
        • 总结
      • 五、CSS盒模型及BFC
      • 六、页面布局
      • 七、安全问题:CSRF和XSS
        • 1 前言
        • 2 CSRF
          • 2.1 CSRF的基本概念、缩写、全称
          • 2.2 CSRF的攻击原理
          • 2.3 CSRF如何防御
        • 3 XSS
          • 3.1 XSS的基本概念
          • 3.2 XSS的攻击原理
          • 3.3 XSS的攻击方式
          • 3.4 XSS的防范措施(encode + 过滤)
        • 4 CSRF 和 XSS 的区别
      • 八、跨域通信类
        • 1 前言
        • 2 同源策略的概念和具体限制
        • 3 前后端如何通信
        • 4 如何创建Ajax
          • 4.1 发送 Ajax 请求的五个步骤(XMLHttpRequest的工作原理)
          • 4.2 发送 get 请求和 post 请求
          • 4.3 onreadystatechange 事件
          • 4.4 事件的触发条件
          • 4.5 事件的触发顺序
          • 4.6 实际开发中用的 原生Ajax请求
        • 5 跨域通信的几种方式
          • 5.1 JSONP
          • 5.2 WebSocket
          • 5.3 CORS
          • 5.4 Hash
          • 5.5 postMessage()方法
      • 九、前端错误监控
        • 1 前言
        • 2 前端错误的分类
        • 3 每种错误的捕获方式
          • 3.1 即时运行错误的捕获方式
          • 3.2 资源加载错误的捕获方式
        • 4 错误上报的两种方式
      • 十、HTTP协议
        • 1 前言
        • 2 HTTP协议的主要特点
          • 2.1 简单快速
          • 2.2 灵活
          • 2.3 无连接
          • 2.4 无状态
        • 3 HTTP报文的组成部分
          • 3.1 请求报文包括:
          • 3.2 响应报文包括:
        • 4 HTTP方法
        • 5 get 和 post的区别
        • 6 http状态码
        • 7 持久链接/http长连接
        • 8 长连接中的管线化
          • 8.1 管线化的原理
          • 8.2 管线化的注意事项
    • 其他问题
    • 设计模式
  • 精选模块