持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情
面向对象开发
是一个开发思想
面向过程
再开发的过程中, 关注每一个 步骤 细节 顺序, 实现效果
面向对象
再开发的过程中, 只关注有没有一个对象能帮我完成
在开发过程中
面向过程
按照顺序一步一步来
面向对象(轮播图)
找到一个对象, 能帮我完成轮播图
JS 本身没有, 我们需要第三方
swiper: 生成一个完成轮播图的对象
我们:
当你需要完成一个 功能 A 的时候
找到 JS 有没有这个完成 功能 A 的对象
如果没有, 我们 制造一个 "构造函数"
"构造函数" 可以制造完成 功能 A 的对象
构造函数的能力: 能创造一个 有属性 有方法 合理的 对象
面向对象
书写一个构造函数
能创建一个对象包含三个成员
1. btns
2. tabs
3. 方法, 能操作自己的 btns 和 tabs 的方法
使用这个构造函数创建一个对象, 根据你传递参数来实现选项卡效果
创建对象的四种方式
1.字面量创建
let o1 = {
name: 'Jack',
age: 18,
gender: '男'
}
2.内置构造函数创建
使用方法：var obj = new Object()
let o1 = new Object() o1.name = 'Jack'o1.age = 18
复制代码
3.工厂函数创建对象
先自己做一个工厂函数
使用自己做的工厂函数来创建对象
1. 创建一个工厂函数
function createObj(name, age, gender) {
let obj = {}
1-2. 手动添加成员
obj.name = name
obj.age = age
obj.gender = gender
1-3 手动返回这个对象
return obj ;
}
2. 使用工厂函数创建对象
let o1 = createObj('Jack', 18, '男')
console.log(o1) 创建第二个对象
let o2 = createObj('Rose', 20, '女')
console.log(o2)
4.自定义构造函数创建
书写一个构造函数
使用构造函数创建对象
构造函数的要求
普通函数, 在调用时和 new 关键字连用, 才有构造函数的能力
和 new 关键字连用 this => 当前对象(new 前面的那个变量名)
// 1. 创建一个构造函数
function createObj(name, age, gender) {
this.name = name
this.age = age
this.gender = gender
}
// 2. 创建对象
let o1 = new createObj('Jack', 18, '男')
// 本次调用的时候, 函数内部的 this 就指向 o1
console.log(o1)
let o2 = new createObj('Rose', 20, '女')
console.log(o2)
构造函数的书写和使用
构造函数也是函数, 只不过是在调用的时候和 new 关键字连用了
目的: 就是为了创建一个 有属性 有方法 合理的 对象
1. 调用必须有 new 关键字
没有 new,没有创建对象的能力
有 new，自动创建一个对象
function fn() {} let o1 = new fn()
console.log(o1)；
复制代码
2. 构造函数内部不写 return
return 为基本数据类型, 写了白写
return 为复杂数据类型, 构造函数白写
function fn() {
this.a = 100；// 基本数据类型写了白写
return 123；// 复杂数据类型, 构造函数白写
return new Date()；
}
let o1 = new fn()；
console.log(o1)；
3. 构造函数在调用的时候,
如果不需要传递参数, 最后的小括号可以不写，推荐都写上
function fn() {
this.a = 100；
this.b = 200；
}
let o1 = new fn；
console.log(o1)；
4. 构造函数推荐首字母大写
为了直观看出和普通函数的区别
看到首字母大写的函数, 基本上就要和 new 连用
function Fn() { this.a = 100 }
复制代码
5. 当函数和 new 关键字连用
会创造对象, 我们关创造出来的对象叫做 实例对象
创造的过程叫做 实例化 的过程
构造函数体内的 this 指向当前实例对象
构造函数是否合理
构造函数体内书写方法的时候
创建多少个实例化对象, 那么就有多少个方法要占用内存空间
不合理: 因为会有对于的函数内存空间被占用
prototype (原型 / 原型对象)
解释： 每一个函数天生自带一个属性叫做 prototype,
只要函数定义好以后, 这个 prototype 就生成了 。
构造函数也是函数, 构造函数也有 prototype, 我们可以添加一些内容
这个天生自带的 prototype 里面有一个属性叫做 constructor
表示我是哪一个构造函数伴生的原型对象
function Person() {}
Person.prototype.sayHi = function () {
console.log('hello world')；
}
console.log(Person.prototype)；
proto
解释: 对象天生自带一个属性, 叫做 proto,
指向所属构造函数的 prototype
实例化对象也是一个对象,也有 proto 属性
function Person() {}
Person.prototype.sayHi = function () {
console.log('hello world');
}
let p1 = new Person();
console.log(p1);
// 当我访问 p1.__proto__ 的时候就应该由 sayHi
console.log('Person.prototype', Person.prototype); console.log('p1.__proto__', p1.__proto__);
console.log(Person.prototype === p1.__proto__);
