面向对象
面向过程是一种关注过程的开发方式- 在开发过程中，要关注每一个细节步骤和顺序
面向对象是一种面向对象的开发方式- 在开发过程中，看是否存在一个对象帮我们完成某件事情
- 如果存在，则使用这个对象
- 如果不存在，就创作这样一个对象
- 创建对象的过程，就是
面向对象的封装过程 - 面向对象的核心：高内聚低耦合
构造函数- 批量生产对象
- 像函数一样传递参数，可以给每一个对象添加不同内容
- 完成一个功能，先制造构造函数
- 利用构造函数创建对象
- 依赖对象完成功能
- 构造函数要生产有属性有方法的合理的对象
- 构造函数
- 属性：写在构造函数体内
- 方法：写在构造函数原型
- 面向对象开发
创建对象方式
1.字面量方式
let obj = {
id:1,
name:sua,
}
2.内置构造
var obj = new Object()
3.工厂函数创建对象
function createObj(id,name){
//手动创建对象
let obj = {}
obj.id = id
obj.name = name
obj.case = function(){
console.log('hi');
}
return obj
}
// 使用工厂函数创建对象
let obj1 = createObj(1,'lili')
let obj2 = createObj(2,'lisa')
console.log(obj1,obj2);
4.自定义构造函数创建对象
function createObj(id,name) {
this.id = id
this.name = name
this.case = function () {
console.log('hi');
}
}
// 使用自定义构造函数创建对象
let obj1 = new createObj(1,'lili')
let obj2 = new createObj(2,'lisa')
let obj3 = new createObj()
console.log(obj1, obj2);
console.log(obj3);
构造函数
- 构造函数和普通函数没有区别
- 构造函数书写规范
- 调用的时候和new关键字连用
- 首字母不大写，只要和 new 连用，就有创造对象的能力
- 如果不需要传递参数，那么可以不写 （），如果传递参数就必须写
- 每次 new 的时候，函数内部的 this 都是指向当前这次的实例化对象
- 内部return返回简单数据类型时 没有实际作用
- 内部return返回复杂数据类型时 构造函数失效
- 构造函数的不合理
function Person(name,age){
this.name = 'lili'
this.age = 18
}
let obj = new Person()
let obj1 = new Person()
console.log(obj,obj1); // 相同对象
console.log(obj === obj1); // false
一模一样的函数出现了两次，占用了两个空间地址
原型 prototype
- 每一个函数天生自带的属性，是一个对象空间
- 在函数的 prototype 里面存储的内容，不是给函数使用的，是给函数的每一个实例化对象使用的
- 可以使用对象操作的语法，向里面添加一些内容
对象
- 定义：在访问对象成员时，如果他没有这个属性，会自动去所属构造函数的prototype上查找
- 自定义构造函数创建的对象在访问对象成员时
- 如果他没有这个属性，会自动去所属构造函数的prototype上查找
- 哪个构造函数创建的对象，这个对象就属于哪个构造函数
- 构造函数在创建对象的过程，起名为
实例化的过程- 创建出来的对象叫做这个构造函数的实例化对象
function Person () {}
console.log(Person.prototype) // 是一个对象
- 既然是一个对象, 那么我们就可以向里面放入一些东西
function Person() {}
Person.prototype.name = 'prototype'
Person.prototype.sayHi = function () {}
重点: 在函数的 prototype 里存储的内容, 不是给函数使用的, 是给函数的每一个实例化对象使用的
proto
每一个对象都天生自带一个成员, 叫做 __proto__, 是一个对象空间
- 既然每一个对象都有, 实例化对象也是对象, 那么每一个实例化对象也有这个成员
- 这个
__proto__对象空间是给每一个对象使用的 - 当你访问一个对象中的成员的时候
- 如果这个对象自己本身有这个成员, 那么就会直接给你结果
- 如果没有, 就回去
__proto__这个对象空间里面找, 里面有的话就会有结果
- 那么这个
__proto__又指向哪里呢?- 这个对象是由那个构造函数 new 出来的
- 那么这个对象的
__proto__就指向这个构造函数的prototype
function Person() {}
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype) // true
- 实例化对象的
__proto__和所属构造函数的prototype是一个对象空间 - 我们可以通过构造函数名称来向
prototype中添加成员 - 对象在访问的时候自己没有, 可以自动去自己的
__proto__中查找 - 那么, 我们之前构造函数的缺点就可以解决了
- 我们可以把函数放在构造函数的
prototype中 - 实例化对象访问的时候, 自己没有, 就会自动去
__proto__中找 - 那么也可以使用了
- 我们可以把函数放在构造函数的
function Person() {}
Person.prototype.sayHi = function () {
console.log('hello Person')
}
var p1 = new Person()
p1.sayHi()
-
p1自己没有sayHi方法，就会去自己的__proto__中查找 -
p1.__proto__就是Person.prototype -
我们又向
Person.prototype中添加了sayHi方法 -
所以
p1.sayHi就可以执行了 -
到这里，当我们实例化多个对象的时候，每个对象里面都没有方法
-
都是去所属的构造函数的
prototype中查找 -
那么每一个对象使用的函数，其实都是同一个函数
-
那么就解决了我们构造函数的缺点
function Person() {}
Person.prototype.sayHi = function () {
console.log('hello')
}
var p1 = new Person()
var p2 = new Person()
console.log(p1.sayHi === p2.sayHi)
-
p1是Person的一个实例 -
p2是Person的一个实例 -
也就是说
p1.__proto__和p2.__proto__指向的都是Person.prototype -
当
p1去调用sayHi方法的时候是去Person.prototype中找 -
当
p2去调用sayHi方法的时候是去Person.prototype中找 -
那么两个实例化对象就是找到的一个方法，也是执行的一个方法
-
结论
- 当我们写构造函数的时候
- 属性我们直接写在构造函数体内
- 方法我们写在原型上
原型链
一个对象所属的构造函数
- 每一个对象都有一个自己所属的构造函数
- 比如: 数组
// 数组本身也是一个对象 var arr = [] var arr1 = new Array()- 以上两种方式都是创造一个数组
- 我们就说数组所属的构造函数就是
Array
- 比如: 函数
// 函数本身也是一个对象 var fn = function () {} var fun = new Function()- 以上两种方式都是创造一个函数
- 我们就说函数所属的构造函数就是
Function
constructor
- 对象的
__proto__里面也有一个成员叫做 constructor - 这个属性就是指向当前这个对象所属的工造函数
链状结构
- 当一个对象我们不知道准确的是谁构造的时候, 我们就把他看成
Object的实例化对象 - 也就是说, 我们的 构造函数 的 prototype 的 proto 指向的是 Object.prototype
Object.prototype也是个对象, 那么它的__proto__又指向谁呢?- 因为
Object的 js 中的顶级构造函数, 我们有一句话叫 万物皆对象 - 所以
Object.prototype就到顶了,Object.prototype 的 __proto__就是 null
原型链的访问原则
- 访问一个对象的成员时, 自己没有就会去
__proto__中找 - 接下来就是, 如果
__proto__里没有就再去__proto__里面找 - 一直找到
Object.prototype里面都没有, 那么就会返回undefined
对象的赋值
- 到这里, 我们就会觉得, 如果是赋值的话, 那么也会按照原型链的规则来
- 但是: 并不是! 并不是! 并不是! 重要的事情说三遍
- 赋值的时候就是直接给对象本身赋值
- 如果原先有就是修改
- 如果原先没有就是添加
- 不会和
__proto__有关系
判断数据类型
1. typeof
- 缺点: 引用数据类型判断的时候不太准确
2. constructor
- 语法: 数据.constructor === 构造函数
- 我们可以通过 对比他等于那个构造函数, 然后确认他是那个数据类型
- 缺点: undefined 和 null 不能使用
- constructor 其实就是一个对象内部的一个属性, 是有可能被修改的
3. instanceof
- 语法: 数据 instanceof 构造函数
- 缺点: undefined 和 null 不能使用
- 引用数据类型, 有可能会被识别对 对象类型
4. Object.prototype.toString.call(要判断数据类型的数据)
- 能够判断 JS 中 所有的 数据类型
console.log(Object) // 一个内置的构造函数
console.log(Object.prototype) // 构造函数的原型对象
console.log(Object.prototype.toString) // 原型对象中的一个属性, 值是一个函数
console.log(Object.prototype.toString.call([])) // 调用了 函数的 call 这个方法, 修改了 前边函数内部的 this
总结
- 到了这里, 我们就发现了面向对象的思想模式
- 当我想完成一个功能的时候
- 先看内置构造函数有没有能给我提供一个完整功能对象的能力
- 如果没有, 我们就自己写一个构造函数, 能创造出一个完成功能的对象
- 然后再用我们写的构造函数 new 一个对象出来, 帮助我们完成功能就行了
tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
.tab,
.tab1 {
width: 600px;
height: 400px;
border: 10px solid #ccc;
margin: 50px auto;
display: flex;
flex-direction: column;
}
ul {
height: 60px;
display: flex;
}
ul>li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
color: #fff;
background-color: skyblue;
cursor: pointer;
}
ul>li.active {
background-color: orangered;
}
ol {
flex: 1;
position: relative;
}
ol>li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 100px;
color: #fff;
background-color: purple;
display: none;
justify-content: center;
align-items: center;
}
ol>li.active {
display: flex;
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab1">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
function Tabs(e) {
this.e = document.querySelector(e)
this.btns = [...this.e.querySelectorAll('ul>li')]
this.box = [...this.e.querySelectorAll('ol>li')]
}
// 原型上书写方法
Tabs.prototype.change = function () {
const that = this
// forEach如果传递的第一个参数是普通函数，那么内部 this 是window
this.btns.forEach((ele, index) => {
ele.onclick = function () {
that.btns.forEach((item, itemIndex) => {
item.classList.remove('active')
that.box[itemIndex].classList.remove('active')
})
ele.classList.add('active')
that.box[index].classList.add('active')
}
});
}
// 调用机器
const t = new Tabs('.tab')
t.change()
// console.log(t);
const t1 = new Tabs('.tab1')
t1.change()
</script>
</body>
</html>
