JS 核心语言基础语法 之 面向对象第二讲

网友投稿 543 2022-05-29

hello,大家好,在上一讲里,我们简单理解了一下什么是对象,然后呢,在文档末尾引导读者到我博客园里去看了看面向对象的三个特征,都是啥,不知道有没有同学看啊,理解面向对象的特征,对理解面向对象的思路是非常有帮助的,这一讲呢,我们主要来了解一下这三个特征(封装、继承、多态)中,继承的方式有哪些,还是老套路,看图说话~

从上图,我们可以清晰的看到,继承的方式有7中方式,下面我们逐一了解一下。

第一种:原型链继承

实现方式,在图中我们可以看到哈,就一句话,b.prototype = new A(),通过这一句话,我们就可以让A把b对象原型链上的属性方法都继承了,该方法的优缺点分别是:

优点:1.简单;2.给b增加原型方法不会影响到A;

缺点:1.给子类添加新方法时,必须书写在b.prototype = new A()后面;2.无法实现多继承;3.所有的属性都是共享的;4.没有办法传递参数

第二种:借用构造函数模式

我们先看下示例:

//示例: function A(name){     this.name = name }; function B(){     A.call(this, '张三');  //或者 A.apply(this, ['张三']);     this.age = 29; }; var C = new B(); alert(C.name); //张三 alert(C.age); //29

JS 核心语言基础语法 之 面向对象第二讲

优点:1.可以实现多继承;2.解决了共享的问题;3可以传参;

缺点:1.创建的实例只是子类的实例不是父类的实例;2.只能继承构造函数中的属性和方法,不能继承原型的属性和方法;3.占用多余内存,无法复用

第三种:组合继承(伪经典继承)

//示例: function A(name){     this.name = name;     this.color = ['red', 'green']; }; A.prototype.sayName = function(){     alert(this.name); }; function B(name, age){     //继承属性     A.call(this, name);     this.age = age; }; //继承方法 B.prototype = new A(); B.prototype.constructor = B; B.prototype.sayAge = function(){     alert(this.age); }; var C1 = new B('张三', 29); C1.color.push('black'); alert(C1.color); //'red, green, black' C1.sayName(); //张三 C1.sayAge(); //29

优点:集合上面两种的优点;

缺点:父类构造函数被调用两次,存在同名覆盖的问题,并且会占用多余的内存

第四种:原型式继承

使用原型式继承的前提是对象和对象直接的继承。

实现该种继承的方式有两种,分别是ES3和ES5的方法,具体如下:

ES3:

//示例: function object(o){   function F(){};   F.prototype = o;   return new F(); }; var person = {   name: '张三',   friends: ['李四'] }; var B = object(person); B.name = '王五'; B.friends.push('赵六'); console.log(B); //F {name: "王五"} console.log(person);//{name: "张三", friends: ["李四", "赵六"]}

ES5:

//示例: var person = {   name: '张三',   friends: ['李四'] }; var B = Object.create(person); B.name = '王五'; B.friends.push('赵六'); console.log(B); //F {name: "王五"} console.log(person);//{name: "张三", friends: ["李四", "赵六"]}

第五种:寄生式继承

//示例: function object(o){   function F(){};   F.prototype = o;   return new F(); }; function createAnother(original){   var clone = object(original);   clone.sayHi = function(){     alert('Hi');   };   return clone; }; var person = {   name: '张三',   friends: ['李四'] }; var B = createAnother(person); B.sayHi(); //Hi

第六种:寄生组合式继承(完美继承或经典继承)

//示例: function inheritPrototype(B, A){   var p = Object(A.prototype);  //var p = Object.create(A.prototype);  ES5   p.constructor = B;   B.prototype = p; }; function A(name){   this.name = name;   this.colors = ['red', 'green'] }; A.prototype.sayName = function(){   alert(this.name); }; function B(name, age){   A.call(this, name);   this.age = age; }; inheritPrototype(B, A); B.prototype.sayAge = function(){   alert(this.age); }; var C = new B('张三',29); C.colors.push('black'); console.log(C.colors); //["red", "green", "black"] C.sayName(); //张三

优点:解决了伪经典继承的缺点

第七种:克隆

克隆分为深克隆和浅克隆两种,网上介绍的文章很多,大家可以自己找找看看哦~

以上就是继承的方式总结,需要自己反复练习揣摩哈,主要是思路~

寄语共勉:有种力量叫放大目标,有种智慧叫把问题缩小,我们的终极目标是学好JavaScript,小目标是尽量掌握好每个小知识点~

Elasticsearch

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Vue进阶(幺陆幺):mixins学习
下一篇:【精选单品】掌握企业协同管理,赋能企业数字化、智能化发展!
相关文章