Js面向对象构造函数继承

合集 - 前端开发(23)

1.第一次写博客，关于前端开发deMVC在js中的应用2016-07-122.react开发中的小细节2017-03-193.CSS开启硬件加速来提高网站性能2019-06-174.js中this的指向问题2019-06-10

5.Js面向对象构造函数继承2017-03-26

6.Js面向对象原型~构造函数2017-03-197.JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏2019-10-288.Promise核心原理解析2019-09-279.图解javascript的this指向2019-09-1210.图解javascript原型链2019-09-0611.被闭包啪啪啪的打脸之 闭包的错误使用2019-08-2812.react解析: render的FiberRoot(三)2019-08-1013.个人小程序应用开发指南2019-07-2214.ES2019 / ES10有什么新功能?2019-06-2115.2022前端开发知识总结归纳（前端掌握知识）2022-10-3116.Axios源码解析：请求响应拦截器2021-12-0217.AntV G2可视化引擎, 有用过嘛？2021-11-3018.弄懂！ES6中的Iterator迭代器2020-06-1019.🔥[译] 正交设计组件的好处2020-01-0920.小程序开发指南之性能优化2019-12-0421.聊一聊，React开发中应该规避的点2019-11-2622.解析：让你弄懂redux原理2019-11-0523.关于Web GIS基础知识2024-03-26

收起

构造函数继承

　　<!-- 创建构造函数 -->

　　function Animal(){
　　　　this.species= '动物';
　　}

　　function Dog(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}

　　prototype模式：

　　　　如果"狗"的prototype对象，指向一个Animal的实例，那么所有"狗"的实例，就能继承Animal了。

　　<!-- 继承 -->
　　Dog.prototype = new Animal();
　　Dog.prototype.constructor = Dog; //将Dog.prototype对象的constructor值改为Dog
　　var dog1 = new Dog("大毛","黄色");
　　alert(dog1.species); // 动物

　　利用空对象作为中介:

　　　　利用一个空对象作为中介。

　　var F = function(){};
　　F.prototype = Animal.prototype;
　　Cat.prototype = new F();
　　Cat.prototype.constructor = Cat;

　　// F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，不会影响到Animal的prototype对象。

　　　　我们将上面的方法，封装成一个函数，便于使用。

　　function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

　　<!-- 使用的时候，方法如下 -->
　　　　extend(Dog,Animal);
　　　　var dog1= new Dog("大毛","黄色");
　　　　alert(dog1.species); // 动物

　　　　// 这个extend函数，就是YUI库如何实现继承的方法。