JavaScript——继承一(原型链继承)

简介: 通过让子类的原型去等于它父类的实例,来实现继承。

原型链继承的原理:通过让子类的原型去等于它父类的实例,来实现继承。

其子类可以获得所有方法(父类构造函数中、父类原型中的属性和方法)。

看如下的几个例子:

//先定义一个父类
function Father(name){
            this.name = name || 'LiHua';
            this.arr = ['father','mother'];
            this.fn1 = function(){
                return this.name + '这是一个家庭';
            }
        }
        Father.prototype.age = 80;
        Father.prototype.arr = ['borther','sisters'];
        Father.fn2 = function(sex){
            return this.name + '这是第二个家庭' + sex
        }
        // 子类
        function Son(name){};
        Son.prototype = new Father();//原型链继承
        Son.prototype.constructor = Son;//修正constructor属性值
        //用原型模式创建子类实例对象
        var son1 = new Son('Jack');
        var son2 = new Son('Tom');
        console.log(son1);
        console.log(son2);

20211005132626257.png

 1、子类对象是Son的实例,也是Father的实例

console.log(son1 instanceof Son);
console.log(son1 instanceof Father);
console.log(son1 instanceof Object);

结果:

20211005133014971.png

2、子类实例可以访问到父类构造函数中的属性和方法、父类原型中的属性和方法。

意思就是可以继承父类中所有的属性

console.log(son1.name);
console.log(son1.arr);
console.log(son1.fn1());
console.log(son1.age);
console.log(son1.arr2);
console.log(son1.fn2('男'));

20211005133618282.png

3、 子类实例不能直接修改原型对象上的属性

console.log(son1.name); //LiHua
        console.log(son2.name); //LiHua
        son1.name = 'NanC'; //修改的是son1对象自身的属性,不影响son2
        console.log(son1.name); //NanC
        console.log(son2.name); //LiHua
        console.log(son1);
        console.log(son2);

20211005133938134.png

4、 引用类型的属性的修改——特殊

console.log(son1.arr);
console.log(son2.arr);
son1.arr.push('uncle','aunt');
console.log(son1.arr);
console.log(son2.arr);

20211005134340636.png

son1.arr.push('uncle','aunt');
        console.log(son1.arr);
        console.log(son2.arr);
        son1.arr2.push('cousin');
        console.log(son1.arr2);
        console.log(son2.arr2);
        console.log(son1);
        console.log(son2);

效果如下:

20211005134835377.png

可以看到son1和son2中的数组已经发生变化

5、函数可复用,每个子类实例可以共享父类实例的方法

console.log(son1.fn1 === son2.fn1); //true
console.log(son1.fn2 === son2.fn2); //true

效果如下:

20211005135220253.png


相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
2月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
1月前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
1月前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
1月前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
1月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
1月前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
31 1
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
33 1
|
3月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
2月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
30 0