什么是面向对象
机器语言->汇编语言->低级语言(面向过程)->高级语言(面向对象)->框架->api
面向对象 : 把一些公共的东西封装起来 , 通过new出来的对象直接调用就行
#面向对象的知识点-call
#类和构造函数
#
#改变this指向
#call 是什么
function fn(...args) {
console.log(this, args);
}
/*
* fn 放在对象中 对象.fn()可以调用这个方法 此时this指向该对象
* */
/*
* 改变this指向 js提供三个方法 call apply bind
* 函数.call(参数1:想改变成的this, 后面的参数 会依次传递到原函数中)
* 函数.apply(参数1:想改变成的this, 第二个参数是一个数组)
* 函数.apply(参数1:想改变成的this,后面的参数 会依次传递到原函数中)
特点: 不会立即执行, 会返回一个新的函数 执行这个函数就可以传递
*
* */
let arr = [1, 2, 3];
fn.call(arr, '小耿', '小杨', '小候',);
#call的应用-类型判断
/*
* 所以 对于类型检测 最好采用下面方式:
* */
const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target);
const isArray = isType("Array");
const isObject = isType("Object");
const isRegExp = isType("RegExp");
const isNull = isType("Null");
console.log(isArray({}));
#apply
function fn1(...args) {
console.log(this, args);
}
let obj = {name: '张三'};
//call 传参可以传无限个 apply 传参用数组的方式传递
fn1.apply(obj, ['1', '2','fsfs']);
#bind
function fn(...args) {
console.log(this,args);//['hello',{name: 'name'},'1,2,3']
}
let arr = [1, 2, 3];
//bind也可以改变this指向 但是不会立即执行
//此时 bind返回一个新的函数
//如果想传参的话 通过fn.bind 或者 返回的新的函数中传参
const newFn = fn.bind(arr, 'hello',{name: 'name'});
newFn('1,2,3');
#面向对象的知识点-prototype
#prototype的本质
对象.__proto__ === 类.prototype 解释过来就是 类可以调用的属性或者方法都在对象的原型上
1
#es6中面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
* es5中的面向对象
*
* */
let arr = new Array(1, 2, 3);
//1: 对象(实例) = new 类/构造函数()
//Person 大写
//Person 类 === 构造函数
//es中 类 === 构造函数
//类: 只要有 new new后面跟着的就是类
//构造函数 : 通过参数 可以传递到函数本身的this身上
function Person(name,age) {
//this === person // true
this.name = name;
this.age = age;
this.fn = function () {
console.log(this === person);
}
}
//new 得到了实例
let person = new Person('张三',20);//对象
console.log(person.name);
console.log(person.age);
console.log(person.fn());
</script>
</body>
</html>
#super : 父类的原型
class Person {
constructor(name) {
this.name = name;
console.log(this.name);
}
getName() {
console.log('父类的getName');
}
}
class Man extends Person {
constructor(props) {
super(props);
super.getName();//调用父类的getName()
}
}
#es6实现完整的继承
class Person {
constructor(name) {
this.name = name;
console.log(this.name);
}
getName() {
console.log('父类的getName');
}
}
class Man extends Person {
constructor(props) {
super(props);
}
getName() {
console.log('子类的getName')
}
getSuperName() {
super.getName();
console.log(Person.prototype.getName === super.getName);
}
}
new Man('小明').getSuperName();
#面向对象-小球案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.circle {
/* 40px;*/
/*height: 40px;*/
border-radius: 50%;
/*background-color: #d14596;*/
position: absolute;
}
.rect {
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<button id="btnCircle">随机生成小球</button>
<button id="btnRect">随机生成方块</button>
</div>
<script>
btnCircle.onclick = function () {
// 面向函数
// let oCircle = document.createElement('div')
// oCircle.classList.add('circle');
// box.appendChild(oCircle);
// 面向对象
// 创建一个对象 class
new Circle();
};
btnRect.onclick = function () {
new Rect();
};
class Graph{
random(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
randomColor() {
//# 1-9 + abcdef
//#1efc4d
const letters = ['a','b','c','d','e','f'];
const strs = [...letters];
for (let i = 0; i < 10; i++) {
strs.push(i + '');
}
// console.log(strs);
//#1efc4d
let i = 0;
let colorStr = '#';
while (i < 6) {
//随机的下标
let index = this.random(0, strs