一, 面向对象
构造函数 + 原型 + 继承
1. 构造函数+原型的回顾
<script>
// 构造函数 是一个函数 作用 创建对象的 用法 必须 new
// 原型 理解 DNA 在构造函数的原型上所定义的方法 用在实例中
// 实例 通过构造函数所创建出来的对象
// 构造函数中 关键字 this === 被new出来的实例
// 构造函数
function person (name) {
// 实例对象 对象添加属性
// p1.name = name;
this.name = name;
};
// 方法定义在原型上
person.prototype.scale = function () {
console.log(this.name, '放大');
};
// p1 实例 对象
const p1 = new person('悟空');
const p2 = new person('八戒');
</script>
2. 继承在代码作用
- 复用 让构造函数复用一些另外的构造函数中已经写好的代码
- 子构造函数去复用父构造函数
- 子构造函数 既有 父构造函数 的一些方法 同时 也有自己的一些方法
原型来实现方法的继承
<script>
/*
1. 定义一个 父亲 构造函数 有一个方法 say() Person
2. 定义两个儿子 构造函数 拥有父函数的 say方法
1.BluePerson
2.RedPerson
*/
function Person (){}
Person.prototype.say = function(){
console.log('这个是Person的属性');
}
// 复用有内容的构造函数
function BluePerson (){}
BluePerson.prototype.say = Person.prototype.say
// 如果有需要单独添加属性, 就单独和以前一样添加
BluePerson.prototype.jump = function (){
console.log('这是BluePerson单独添加的');
}
function RedPerson (){}
RedPerson.prototype.say = Person.prototype.say
const Dy = new Person()
const Dw = new BluePerson()
// const Ds = new RedPerson()
Dy.say()
Dw.say()
Dw.jump()
// Ds.say()
// 普通的html标签 div img 标签
// div 没有 src属性 但有 id 和 className 属性
// img 有 src属性, 也有 id 和 className
</script>
3. 代码中关键点
原型 prototype
可以称之为 DNA 能让 子构造函数 去复用继承父亲的一些方法
js内部中 :
HtmlDivElement
HtmlButtonElement
<body>
<div></div>
<button></button>
<script>
// 万物都是对象
// 1 指的是 obj 数据类型
// 2 指的是 物体
// dom 文档对象模型
const div = document.querySelector('div');
const button = document.querySelector('button');
// console.log(div);// 把div的标签形式 显示出来 不方便我去了解 div 对象
console.dir(div);// 把标签 dom元素 以对象的形式显示出来
console.dir(button);
</script>
</body>
this
<script>
// this 范围很广 主要在 对象中来学习
// this 对象本身 我自己
// this 指向 对象本身 可以被修改 通过 call 方法来修改
// call 帮助我们调用方法 还可以帮助修改 this
// call 在调用方法的时候 还可以传递参数
const obj = {
username: '悟空',
say (a){
console.log(this,a);
}
}
const newObj = {
username: '八戒'
}
// 构造 say 修改 newObj
obj.say.call(newObj,13)
</script>
对象添加属性
<script>
// 在对象 this = 对象本身的!!!
// 普通的对象
const obj = {
add() {
// 给对象添加属性 两段代码 封装到一个普通函数中
obj.a = 1
obj.b = 2
// ==== 修改 this
this.c = 3
this.d = 4
}
}
obj.add() // 让方法帮我们添加属性
console.log(obj);
</script>
call
可以帮助我们调用 函数
call 可以修改 this的指向
call 还可以传递参数
<script>
// 普通函数
function Person(name, color, height, weight) {
this.name = name;
this.color = color;
this.height = height;
this.weight = weight;
// ====
// obj.name = name;
// obj.color = color;
// obj.height = height;
// obj.weight = weight;
}
// 定义一个空的对象
const obj = {}
Person.call(obj, '悟空', '黄色', 180, 66)
// 1. 调用了 person 方法
// 2. 方法内部 给 this赋值 this 等同于 obj
// 3 this.name=悟空; => obj.name = 悟空; // 赋值动作
// 3 this.color=黄色; => obj.color = 黄色; // 赋值动作
// 3 this.height=150; => obj.height = 150; // 赋值动作
// 3 this.weight=250; => obj.weight = 250; // 赋值动作
console.log(obj); // 拥有了 Person 函数种 所写的一些属性
</script>
4. 继承 到底继承什么东西?
方法
-
属性 ! ! !
哪怕原理我不懂 但是我可以做到 10秒搞定一个继承！！ !
<body>
<div></div>
<script>
/*
实例 对象 身上 信息 一共是两种
1 属性
定义在构造函数内部的this上的数据 属性
2 方法
定义在原型上的函数
上一节课 讲解继承
上一节看 继承 是实现了 继承父亲
1 属性呢
2 方法呢 ！！！！ 原型
*/
// function Person() {
// this.name = '悟空'; // 属性
// this.color = '黄色'; // 属性
// this.height = 150; // 属性
// }
// // 方法
// Person.prototype.say=function(){}
// // 方法
// Person.prototype.scale=function(){}
// 父亲 构造函数 名称 颜色 身高 体重 属性
function Person(name, color, height, weight) {
this.name = name;
this.color = color;
this.height = height;
this.weight = weight;
}
// 儿子 名称 颜色 身高 体重 而且 自己 属性 昵称 、 性别
function YellowPerson(name, color, height, weight, nickname, gender) {
// 父亲中也有
this.name = name;
this.color = color;
this.height = height;
this.weight = weight;
// 儿子
this.nickname = nickname;
this.gender = gender;
}
</script>
</body>
演示属性的继承-代码量
<script>
// 父亲 构造函数 名称 颜色 身高 体重 属性
function Person(name, color, height, weight) {
this.name = name;
this.color = color;
this.height = height;
this.weight = weight;
}
// 儿子 名称 颜色 身高 体重 而且 自己 属性 昵称 、 性别
function YellowPerson(name, color, height, weight, nickname, gender) {
// 父亲中也有
Person.call(this,name, color, height, weight);// 属性的继承 ？？
// 儿子
this.nickname = nickname;
this.gender = gender;
}
const yp = new YellowPerson('悟空', '黄色', 150, 250, '弼马温', '公');
console.log(yp);
</script>
构造函数-实例-属性的继承
<script>
// 我自己 构造函数中的this 指向 实例！！！！！
// function Person(name, color, height, weight) {
// this.name = name;
// this.color = color;
// this.height = height;
// this.weight = weight;
// }
// function YellowPerson(name, color, height, weight) {
// // 借助了父亲里面的代码 快速帮我们 儿子 的属性赋值
// Person.call(this, name, color, height, weight);
// // 1 Person.call 函数 Person（普通的函数即可）被调用
// // 2 Person 函数的作用 给this赋值
// // 3 Person.call(this) call的作用 修改this的指向
// // Person.call(this) this 我自己 = 儿子的构造函数的实例 = yp
// }
// const yp = new YellowPerson('悟空', '黄色', 150, 250);
// console.log(yp);
// 属性的继承 子构造函数 借用了父构造函数的 给 实例赋值代码！！
function Person(name) {
this.username = name;
}
function YellowPerson(name) {
Person.call(this, name); // 属性的继承
}
const yp = new YellowPerson('悟空');
console.log(yp);
</script>
构造函数-方法和属性继承
<script>
/*
实例 实现 属性和方法的继承
1 属性的继承 在 儿子的构造函数中 调用 父亲的构造函数
父亲的构造函数.call(this,参数。。。)
2 方法的继承 在儿子的构造函数的原型上 等于 父亲的构造函数的原型
儿子的构造函数.prototype.方法名称 = 父亲的构造函数.prototype.方法名称
*/
function Person(name) {
this.name = name;
}
Person.prototype.say = function () {
console.log('父亲的say方法');
};
function YellowPerson(name, color) {
Person.call(this, name); // 属性的继承
this.color = color;
}
const yellow = new YellowPerson('八戒', '黄色')
console.log(yellow);
YellowPerson.prototype.say = Person.prototype.say; //方法的解除
YellowPerson.prototype.fly = function () {
console.log('儿子自己的方法 fly');
};
const yp = new YellowPerson()
yp.say()
</script>
