这一节,主要讲解面向对象的继承,回顾上一节讲解到判断对象原型和实例对象的两种方法.废话不多说,直接上代码 !
继承 ==> 重点
- 子对象-->父对象,Object是所有对象的父级
- 一种把其他对象的属性和方法变为己有的方式
- 通过继承可以提高代码的复用性和可维护性
- 举例 : 动物 -- 狗类 -- 金毛狗类
1.对于狗类来説:动物是它的父类型,而金毛狗类是它的子类型
2.对于金毛狗类来説.狗类是它的父类型,动物类是它的超类型.
继承的两种方式
- 接口继承
- 实现继承
- js中的继承:
javaScript中继承只支持实现继承,实现继承主要依赖原型链来完成
Js中继承的几种实现方式
混入式继承
- ** 示例代码1 : **
//1. 创建一个空的对象o
var o = {};
//2. 提供一个已经有的对象obj
var obj = {
name:"对象的属性",
age:20,
sayHello:function () {
console.log("hello");
}
}
//3. 混入式继承(把原有对象的所有属性和方法都拷贝给新的对象)
for(var k in obj)
{
o[k] = obj[k];
}
//4. 打印查看o对象
console.log(o);
//5. 如果属性的值是引用类型的,那么子对象和父对象共享一块数据,修改了某个对象对另外一个对象有影响
console.log(o.sayHello == obj.sayHello); //true
- **示例代码2 : **
<script>
//参数:
//第一个参数是目标对象
//第二个,第三个参数是要拷贝属性的对象
var o = {};
var obj1 = {name:"name"};
var obj2 = {age:20};
var obj3 = {car:{type:"飞船"}};
Object.assign(o,obj2,obj1,obj3);
console.log(o);
obj3.car.type = '汽车';
console.log(o);
</script>
原型式继承
- 原型对象中的成员(属性|方法)可以被使用该构造函数创建出来的所有对象共享
- 利用上面的性质,可以实现原型式的继承
- **示例代码1 : **
<script>
//1. 提供一个构造函数
function Person(name,age) {
this.name = name;
this.age = age;
}
//2. 设置原型对象的属性
Person.prototype.className = "逍遥派1班";
//3. 使用构造函数来创建原型对象
var p1 = new Person("张三",10);
var p2 = new Person("李四",20);
//4. 打印p1和p2对象中的className属性
console.log(p1.className);
console.log(p2.className);
//结论:对象p1和p2继承了构造函数原型对象中的属性className
//但是这并不是严格意义上的继承
</script>
- **示例代码2 : **
<script>
//1. 提供一个构造函数
function Person(name,age) {
this.name = name;
this.age = age;
}
//2. 设置原型对象的属性
Person.prototype = {
constructor:Person,
className:"逍遥派1班"
};
//3. 使用构造函数来创建原型对象
var p1 = new Person("张三",10);
var p2 = new Person("李四",20);
//4. 打印p1和p2对象中的className属性
console.log(p1.className);
console.log(p2.className);
//结论:对象p1和p2继承了构造函数原型对象中的属性className
//注意:使用原型替换的方式实现继承的时候,原有原型对象中的属性和方法会丢失
</script>
**示例代码3 : **
<script>
//1. 提供超类型|父类型
function SuperClass() {
this.name = 'SuperClass的名称';
this.showName = function () {
console.log(this.name);
}
}
//2. 设置父类型的原型属性和原型方法
SuperClass.prototype.info = 'SuperClass的信息';
SuperClass.prototype.showInfo = function () {
console.log(this.info);
};
//3. 提供子类型
function SubClass() {
}
//4. 设置继承(原型对象继承)
SubClass.prototype = SuperClass.prototype;
SubClass.prototype.constructor = SubClass;
var sub = new SubClass();
console.log(sub.name); //undefined
console.log(sub.info); //SuperClass的信息
sub.showInfo(); //SuperClass的信息
sub.showName(); //sub.showName is not a function
</script>
- 存在的问题 :
1.构造器属性指向(默认指向的是父构造函数)
2.无法获得实例属性和方法,只能继承(获得)父构造函数原型对象的属性和方法
- **扩展内置对象 **
要给数组扩展一个name的属性和一个sayHello方法 - 示例代码 :
<script>
//1. 创建数组对象
var arr = [1,2,3];
var arr2 = new Array(1,2,3);
console.log(arr2);
//2. 设置Array构造函数的原型对象
Array.prototype.name = "默认的名称";
Array.prototype.sayHello = function () {
console.log("hello");
};
console.log(arr.name); //默认的名称
console.log(arr2.name); //默认的名称
arr.sayHello(); //hello
arr2.sayHello(); //hello
//1.上面的方式可以达到扩展内置对象的效果,但不推荐这样去做
//2.遇到那种大项目可能需要多人合作一起开发,而且项目中的代码数量可能非常庞大
//3.如果大家都通过这种方式来扩展内置对象,那么日后必将难以管理,而且可能会出现方法被覆盖等安全问题
</script>
- 安全的扩展内置对象
核心过程
1.提供一个构造函数（自定义）
2.设置构造函数的原型对象为内置构造函数创建出来的对象
- 示例代码 :
//Array
function MyArray(){};
//设置原型对象
MyArray.prototype = new Array();
MyArray.prototype.des = "描述信息";
MyArray.prototype.logDes = function(){
console.log(this.des);
}
//使用自己的构造函数来创建对象
var myArr01 = new MyArray();
var myArr02 = new MyArray();
myArr01.push("123","abc");
console.log(myArr01);
console.log(myArr01.des);
function OtherArray(){};
OtherArray.prototype = new Array();
OtherArray.prototype.des = "描述信息";
OtherArray.prototype.logDes = function(){
console.log("------------");
}
var otherArr01 = new OtherArray();
var otherArr02 = new OtherArray();
console.log(otherArr01.des);
otherArr01.logDes();
- 图解
**安全扩展内置对象**
原型链继承 ( 什么是原型链 ? )
-
每个对象都是由构造函数创建出来的，因为每个对象都有构造函数
-
每个构造函数都有一个与之对应的原型对象
-
原型对象本身也是对象
-
因此，原型对象也有自己的构造函数
-
原型对象的构造函数也有自己的原型对象
-
原型对象的构造函数的原型对象也是对象，所以它也有自己的构造函数
-
原型对象的构造函数的原型对象的构造函数也有自己的原型对象。
以上，形成一个链式的结构，就称为是原型链 -
原型链的顶端是Object.prototype,Object.prototype本身也是一个对象，因此也有原型对象
Object.prototype.__proto__ 是null -
原型链的搜索规则 :
是向上查找,如果有直接使用,如果没有,继续向上查找.直到找到原型链的顶端
原型链搜索的路径越长，查询属性所花费的时间就越多
原则：就近原型
**
- 继承方法
1.提供一个父构造函数
2.提供子构造函数
3.设置子构造函数的原型对象为父构造函数的一个实例对象
4.在这个实例对象上面设置属性和方法
- **示例代码 : **
<script>
function A(){
this.age = 55;
this.showAge = function(){
console.log(this.age);
}
};
//设置A的属性和方法
A.prototype.logDes = function(){
console.log("des");
}
function B(){
};
//设置原型链继承
B.prototype = new A();
B.prototype.des = "des";
B.prototype.show = function(){
console.log("show");
};
var b1 = new B();
console.log(b1.age);
b1.showAge();
b1.logDes();
console.log(b1);
</script>
- 复杂的原型链
1.提供构造函数（4）
2.设置属性和方法（建议：属性设置在实例上，方法设置在原型上）
3.设置继承
4.修正构造器属性
- 示例代码 :
<script>
Animal.prototype.run = function(){
console.log("run");
}
function Animal(color){
this.color = color
}
Person.prototype = new Animal();
Person.prototype.eat = function(){
console.log("chi");
}
Person.prototype.constructor = Person;
function Person(){
this.name = "默认的名称"
}
Student.prototype = new Person();
Student.prototype.study = function(){
console.log("good good study, day day up");
}
Student.prototype.constructor = Student;
function Student(){
this.id = "20160501"
}
Boy.prototype = new Student();
Boy.prototype.lol = function(){
console.log("LoL");
}
Boy.prototype.constructor = Boy;
function Boy(){
this.sex = "男"
}
//创建对象
var boy = new Boy("红色");
console.log(boy);
</script>
- 原型链继承的注意点
1.注意必须要在设置子对象的原型属性和原型方法之前来实现继承
2.在子对象的原型对象中可以设置同名的属性或方法,覆盖父对象的原型对象中的属性和方法
3.原型链继承之后,使用字面量的方式来设置原型会导致之前的原型对象丢失
- 示例代码1
<script>
//注意点
//如果代码段2==>代码段1 则运行正常,,如果代码段1==>代码段2,则报错'eat方法不存在'
function Person() {};
Person.prototype.run = function () {
console.log('Person__run');
};
function Man() {};
//代码段1
Man.prototype.eat = function () {
console.log('Man__eat');
};
//代码段2
Man.prototype = new Person(); //设置原型链继承
var m = new Man();
m.run(); //Person__run
m.eat(); //Man__eat
//建议:在设置完原型链继承之后,再设置子对象原型对象上面的属性和方法,否则会丢失(之前的原型对象被切断)
</script>
- 示例代码2 :
<script>
// 注意点2 && 注意点3
// 在子对象中(原型对象中)可以重写父对象中(原型对象中)的方法
// 子对象在调用的时候原型对象中的方法会覆盖父对象原型对象中的
// 方法,父类型的实例调用方法不受影响
function Person() {};
Person.prototype.run = function () {
console.log('Person__run');
};
function Man() {};
//代码段2
Man.prototype = new Person(); //设置原型链继承
Man.prototype.run = function () {
console.log('Man__run');
};
var m = new Man();
m.run(); //Man__run
var p = new Person();
p.run(); //Person__run
</script>
-示例代码3 :
<script>
// 在重写原型对象实现继承之后,不能使用字面量的方式来设置原型对象,
// 否则之前的原型继承关系会被切断
function Person() {};
Person.prototype.run = function () {
console.log('Person__run');
};
function Man() {};
//代码段2
Man.prototype = new Person(); //设置原型链继承
Man.prototype = {
eat:function () {
console.log('Man__eat');
}
}
var m = new Man();
m.eat(); //Man__eat
m.run(); //调用的方法不存在
</script>
- 原型链继承存在的问题
1.父类型实例属性会转换为子类型原型的原型属性，而如果父类型是实例属性是引用类型则会存在共享问题
2.在创建子类型的实例时，不能向父类型的构造函数中传递参数
- ** 示例代码 : **
<script>
//1. 提供父类型的构造函数
function SuperType() {
//2. 在构造函数中中设置实例属性,该属性为引用类型
this.family = ['哥哥','姐姐','爸爸','妈妈'];
};
//3. 提供子类型的构造函数
function SubType() {};
//4. 设置原型继承
SubType.prototype = new SuperType();
//5. 创建父类型的实例对象,并对内部的实例化属性进行修改
var subDemo1 = new SubType();
var subDemo2 = new SubType();
console.log(subDemo1);
alert(subDemo1.family); //哥哥,姐姐,爸爸,妈妈
alert(subDemo2.family); //哥哥,姐姐,爸爸,妈妈
subDemo1.family.push('爷爷','奶奶');
alert(subDemo1.family); //哥哥,姐姐,爸爸,妈妈,爷爷,奶奶
alert(subDemo2.family); //哥哥,姐姐,爸爸,妈妈,爷爷,奶奶
//6. 如果父类型的实例属性中有引用类型,那么在子类型创建的实例对象中存在共享问题
</script>
- Object.Create
- 作用：创建对象，并且设置该对象的原型对象
- 兼容性问题：ES5
- 基本用法
- **示例代码1 : **
<script>
//JavaScript语言精粹
function create(o) {
var F = function () {};
F.prototype = o;
return new F();
}
var obj1 = create({name:"默认的名字"});
console.log(obj1);
//把参数(对象)作为新对象的原型对象
var obj = Object.create({name:"默认的名字"});
console.log(obj);
//需要考虑到浏览器兼容的问题
</script>
- 实例代码2 : 若不兼容则动态添加create方法
<script>
var tmp = {age:20};
if (Object.create){
//如果有值那么就直接调用
var o = Object.create(tmp)
}
else{
Object.create = function () {
var F = function () {};
F.prototype = tmp;
var o = new F();
}
}
</script>
- **示例代码3 : 使用函数来封装 **
<script>
function create(o) {
if (Object.create)
{
//如果有值那么就直接调用
return Object.create(o)
}else
{
var F = function () {};
F.prototype = o;
return F();
}
}
var a = create({name:"默认的名字",age:20});
console.log(a);
</script>
- call && apply函数 ==> 重点
**1.这两个方法都是原型对象上面的方法 -- 借用其他对象的方法
2.call和apply两个函数的作用是一样的，都可以用来借用方法
参数：
第一个参数是调用该方法的对象（函数内部的this绑定的对象）
后面的参数：
call:参数列表
apply:数组
3.调用方法
对象1.方法.call(调用方法的真正的对象，参数1，参数2，参数3)；
对象1.方法.apply(调用方法的真正的对象，[参数1，参数2，参数3..]);**
- **示例代码 : **
<script>
//console.log(Function.prototype);
var demo01 = {
name:"小偷",
showName:function(param1,param2){
console.log(this.name,param1,param2);
}
}
var demo02 = {
name:"我是老实人"
}
demo01.showName("小贼","毛贼");
demo01.showName.call(demo02,"江洋大盗","采花大盗");
demo01.showName.apply(demo02,["山贼","土匪"]);
</script>
- 关于
this
1.javaScript中的this总是指向一个对象。
2.调用方式 :
2.1作为对象的方法来调用 this--->当前的对象
2.2作为普通的函数调用 this--->window
2.3作为构造函数和new使用 this--->构造函数内部新创建的对象
2.4被call或者是apply调用（函数上下文调用） this--->第一个参数
- ** 示例代码1 : 当函数作为对象的方法调用时,this指向该对象**
<script>
var obj = {
name:"张三",
demoFunc:function () {
console.log(this == obj); //true
console.log(this.name); //张三
}
}
obj.demoFunc();
</script>
- 示例代码2 : 当函数作为普通函数调用是,this总是指向全局对象
<script>
window.name = "window测试的name";
var funcName = function () {
console.log(this.name); //window测试的name
}
funcName();
</script>
- 示例代码3: 使用new 构造函数创建对象调用,this总是指向内部默认创建并返回的对象
<script>
function Person() {
this.name = "默认的姓名"
}
var p1 = new Person();
console.log(p1.name); //默认的姓名
</script>
- ** 实例代码4:
Function.prototype.call或Function.prototype.apply调用**
<script>
var obj = {
name:"张三",
getName:function () {
console.log(this.name);
}
}
obj.getName(); //张三
var obj2 = {name:"李四"};
obj.getName.call(obj2); //打印李四
</script>
借用构造函数继承
- 借用构造函数实现继承：可以获得父构造函数中的实例属性，解决了传参的问题
- 示例代码 :
<script>
function Person(name,age){
this.name = name;
this.age = age;
};
function Boy(bookName,name,age){
this.bookName = bookName;
//Person.call(this,"八戒",600); //借用构造函数
Person.call(this,name,age);
}
//创建对象
var boy = new Boy("水煮三国","悟空",600);
var boy02 = new Boy("大话西游","云风",40);
console.log(boy);
console.log(boy02);
</script>
组合(原型链 + 借用)继承
-
借用构造函数实现继承：可以获得父构造函数中的实例属性
Person.call(this,name,age) -
获得原型属性和方法
( Boy.prototype = Person.prototype) -
组合继承：原型 + 借用构造函数
-
**示例代码 : **
<script>
function Person(name,age){
this.name = name;
this.age = age;
};
Person.prototype.des = "描述信息";
Person.prototype.logDes = function(){
console.log(this.des);
};
function Boy(bookName,name,age){
this.bookName = bookName;
//Person.call(this,"八戒",600); //借用构造函数
Person.call(this,name,age);
}
//设置原型继承
//Boy.prototype = new Person();
Boy.prototype = Person.prototype;
//创建对象
var boy = new Boy("水煮三国","悟空",600);
var boy02 = new Boy("大话西游","云风",40);
console.log(boy);
console.log(boy02);
boy.logDes();
var p1 = new Person();
p1.logDes();
Boy.prototype.des = "描述信息-bOY";
boy.logDes();
p1.logDes();
</script>
深拷贝和浅拷贝
- **示例代码 : 浅拷贝 **
<script>
var obj = {
name:"小花脸",
car:{
type:"客车"
}
};
var o = {};
for (var k in obj)
{
o[k] = obj[k];
}
console.log(o);
o.car.type = "银河战舰";
console.log(obj);
</script>
- 深拷贝
**1.提供一个函数，两个参数（原对象，要拷贝属性的对象）
2.在函数中先检查第一个参数是否有值，如果没有值那么就初始化一个空的对象
3.for..in循环来变量参数2,
3.1检查当前的属性值是什么类型
3.2如果是值类型，那么就直接拷贝赋值
3.3如果是引用类型，那么就再调用一次这个方法，去内部拷贝这个对象的所有属性**
- 示例代码 : 深拷贝封装
<script >
var obj = {
name:"小花脸",
car:{
type:"客车",
},
friends:["1","2","3"]
};
//兼容性处理
if(typeof Array.isArray != "function") {
Array.isArray = function(obj){
return Object.prototype.toString.call(obj) == "[object Array]";
}
}
var o = {};
//deepCopy(o,obj);
function deepCopy(obj1,obj2) {
obj1 = obj1 || {};
for (var i in obj2)
{
if (obj2.hasOwnProperty(i))
{
if( typeof obj2[i] == "object")
{
//判断是数组还是对象
obj1[i] = Array.isArray(obj2[i])?[]:{};
//引用类型
deepCopy(obj1[i],obj2[i]); //函数调用
}else
{
//值类型
obj1[i] = obj2[i];
}
}
}
}
deepCopy(o,obj);
console.log(o);
//共享问题
//o.car.type = "小货车";
console.log(obj);
</script>
通过深拷贝实现继承
- 完整的继承方案
1.拥有父构造函数的实例属性
2.拥有父构造函数的原型属性
3.是相互独立的，彼此不受影响
- ** 示例代码 : **
<script>
if(typeof Array.isArray != "function") {
Array.isArray = function(obj){
return Object.prototype.toString.call(obj) == "[object Array]";
}
}
function deepCopy(obj1,obj2) {
obj1 = obj1 || {};
for (var i in obj2)
{
if (obj2.hasOwnProperty(i))
{
if( typeof obj2[i] == "object")
{
//判断是数组还是对象
obj1[i] = Array.isArray(obj2[i])?[]:{};
//引用类型
deepCopy(obj1[i],obj2[i]); //函数调用
}else
{
//值类型
obj1[i] = obj2[i];
}
}
}
}
function Person(name,age){
this.name = name;
this.age = age;
};
Person.prototype.des = "描述信息";
Person.prototype.car = {
type:"汽车"
}
Person.prototype.logDes = function(){
console.log(this.des);
};
function Boy(bookName,name,age){
this.bookName = bookName;
//Person.call(this,"悟空",600); //借用构造函数
Person.call(this,name,age);
}
//设置原型继承
//Boy.prototype = Person.prototype;
deepCopy(Boy.prototype,Person.prototype); //把父构造函数原型对象上面的属性和方法全部拷贝一份给Boy
//创建对象
var boy01 = new Boy("水煮三国","悟空",600);
var boy02 = new Boy("大话西游","云风",40);
Boy.prototype.car.type = "火车";
console.log(Boy.prototype);
var p1 = new Person();
console.log(p1.car.type);
</script>
基本包装类型
- String Number Boolean
- **示例代码 : **
<script>
//1. 创建字符串对象
var str1 = new String("demo01"); //object
var str2 = "demo01"; //string
var str3 = String("demo01"); //string(正确) | object
console.log(typeof str1);
console.log(typeof str2);
console.log(typeof str3);
//2. 创建数字对象
var num1 = new Number(10); //object
var num2 = 10; //number
var num3 = Number(20); //number
//3. 布尔类型的对象
var bool01 = new Boolean(true); //object
var bool02 = true; //boolean
var bool03 = Boolean(true);
console.log(typeof bool01);
//4. 特殊的创建方式
var str4 = new Object("demo01"); //object | string
var num4 = new Object(10);
var bool04 = new Object(true);
console.log(typeof str4);
</script>
- 基本包装类型注意点:
<script>
var str1 = "demo01"; //string
var str2 = new String("demo01"); //object
var str3 = String("demo01");
console.log(str1 == str2); //true 转换
console.log(str1 === str2); //false
console.log(str1.length); //6 获得字符串的长度
//基本数据类型的值怎么能够访问属性呢？
//属性和方法只有对象才有
//为什么？
//字符串、数值以及布尔值在访问属性或者调用方法的时候
//1. 内部会隐式的创建一个对象，利用该对象来访问属性或者是调用方法
//2. 得到结果之后，把结果赋值给基本数据类型的值
//3. 销毁这个创建的对象
str1.des = "描述信息";
console.log(str1.des); //undefined
str2.des = "des";
console.log(str2.des); //des(正确的) | undefined
</script>
- 总结
1.变量的方式调用成功
2.表达式的方式调用成功
3.数值的方式调用失败
- **示例代码 : **
<script>
Number.prototype.sum = function(param){
return this + param;
}
var num1= new Number("10");
var num2 = 30;
console.log(num1.sum(2));
console.log(num1.sum(33));
console.log(num2.sum(44)); //可以调用吗？ 74
console.log((10).sum(11)); //可以调用吗？ （）表达式 21
console.log(10.sum(22)); //不可以调用
</script>
附思维导图一张,希望能帮到各位 ! 如果图片不清晰的话 请下载到本地查看
Js - 面向对象编程三
网友评论