持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
自学前端
- 前文
- 本文是我自学js的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是js高级相关知识
- 这是基于我学习的笔记而来的文章
- backend: 后端 frontend: 前端
对象创建模式
方式一: Object构造函数模式
- 套路: 先创建Object对象, 在动态添加属性/方法
- 适用场景: 起始时不确定对象内部数据
- 问题: 语句太多
var p = new Object(); p.name = "Tom"; p.age = 12; p.setName = function(name) { this.name = name; }
//测试 p.setName("java"); console.log(p.name);
方式二: 对象字面量模式
- 套路: 使用{}创建对象, 同时指定属性/方法
- 适用场景: 起始时对象内部数据是确定的
- 问题: 如果创建多个对象, 有重复代码
var p = { //如果创建多个对象很重复 name: "tom", age: 12, setName: function(name) { this.name = name; } }
//测试 console.log(p.name, p.age); p.setName("阿巴阿巴"); console.log(p.name, p.age);
方式三: 工厂模式
套路: 通过工厂函数动态创建对象并返回
适用场景: 需要创建多个对象
问题: 对象没有一个具体类型, 都是Object类型 function createPerson(name, age) {//返回一个对象的函数===>工厂函数 var obj = { name: name, age: age, setName: function(name) { this.name = name } }
return obj;
}
//创建2个人 var p1 = createPerson("Tom", 12); var p2 = createPerson("bob", 13);
console.log(p1.name, p1.age); console.log(p2.name, p2.age);
方法四: 自定义构造函数模式
- 套路: 自定义构造函数, 通过new创建对象
- 适用场景: 需要创建多个类型确定的对象
- 问题: 每个对象都有相同的数据, 浪费内存
方法5: 构造函数+原型的组合模式
- 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
- 适用场景: 需要创建多个类型确定的对象
原型链继承
方式1
- 套路
- 定义父类型构造函数
- 给父类型的原型添加方法
- 定义子类型的构造函数
- 创建父类型的对象赋值给子类型的原型
- 将子类型原型的构造属性设置为子类型
- 给子类型原型添加方法
- 创建子类型的对象：可以调用父类型的方法
- 关键 1.子类型的原型为父类型的一个实例对象
方式2: 借用构造函数继承(假的)
- 套路:
- 定义父类型构造函数
- 定义子类型构造函数
- 在子类型构造函数中调用父类型的构造
- 关键:
- 在子类型构造函数中通用call()调用父类型构造函数
方式3: 原型链+借用构造函数的组合继承
- 利用原型链实现对父类型对象的方法继承
- 利用super()借用父类型构建函数初始化相同属性
Web Worker多线程
- H5规范提供了js分线程的实现, 取名为: Web Workers
- 相关API
- Worker: 构造函数, 加载分线程执行的js文件
- Worker.prototype.onmessage: 向另一个线程发送消息
- 不足
- worker内代码不能操作DOM(更新UI)
- 不能跨域加载JS
- 不是每个浏览器都支持这个新特性
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于js高级的, 希望大家喜欢
- js的作者是美国人布兰登·艾奇, 非常厉害的人
