继承javascript,继承上亿遗产后豪门老公回来了

JavaScript六种继承方式?

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。

成都创新互联不只是一家网站建设的网络公司;我们对营销、技术、服务都有自己独特见解,公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务!我们经历的每一步也许不一定是最完美的,但每一步都有值得深思的意义。我们珍视每一份信任,关注我们的成都网站制作、做网站质量和服务品质,在得到用户满意的同时,也能得到同行业的专业认可,能够为行业创新发展助力。未来将继续专注于技术创新,服务升级,满足企业一站式营销型网站建设需求,让再小的品牌网站制作也能产生价值!

原型链

首先得要明白什么是原型链,昆明北大青鸟建议可以在一篇文章看懂proto和prototype的关系及区别中讲得非常详细

原型链继承基本思想就是让一个原型对象指向另一个类型的实例

添加方法

在给SubType原型添加方法的时候,如果,父类上也有同样的名字,SubType将会覆盖这个方法,达到重新的目的。但是这个方法依然存在于父类中。

记住不能以字面量的形式添加,因为,上面说过通过实例继承本质上就是重写,再使用字面量形式,又是一次重写了,但这次重写没有跟父类有任何关联,所以就会导致原型链截断。

问题

单纯的使用原型链继承,主要问题来自包含引用类型值的原型。

借用构造函数

此方法为了解决原型中包含引用类型值所带来的问题。

这种方法的思想就是在子类构造函数的内部调用父类构造函数,可以借助apply()和call()方法来改变对象的执行上下文

传递参数

借助构造函数还有一个优势就是可以传递参数

javascript什么是继承

JavaScript中的function是万能的,除了用于的函数定义,也可以用于类的定义。

JavaScript的继承,说起来也是有点怪,不像C++和一些面向对象的语言,他没有public,private等访问控制修饰,也没有implement或其他特定的符号来说明是实现继承。

关于javascript类的继承可以参考一下下面的这个例子。

script type="text/javascript" 

function Person() {

// 属性 

this.Gender = "female";

this.Age = 18;

this.Words = "Silence";

// 方法

this.shouting = function() {

alert("开心哦!父类的方法");

}

}

// 继承

function Programmer() {

this.base = Person;

}

Programmer.prototype = new Person;

// 为子类添加新的方法

Programmer.prototype.typeCode = function() {

alert("俺是敲代码的!IT民工,很不开心。子类的方法");

}

// 调用示例

function sayHello() {

var a = new Programmer();

alert(a.Gender); // 调用父类的属性

a.shouting(); // 调用父类的方法

a.typeCode(); // 调用子类的方法

}        

sayHello();

/script

上例中,首先是声明一个person类,里面包含了一些属性和方法,然后接着又声明了一个programmer类,其中有个base属性,这个属性并不是

必需的,但是出于规范以及以后在查找对象所继承的类时都需要写上,然后是给programmer的原型对象(prototype)拷贝了person类;

于是便实现了类的继承。

参考资料:

聊聊JavaScript如何实现继承及特点

“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢?

(ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 class,只是JavaScript原型继承的语法糖而已)

1. 类式继承

关键点:通过构造函数实现继承。

父类:

function Parent(name) {

this.name = name || "parent";

}

Parent.prototype.say = function() {

return this.name;

}

子类:

function Child() {}

(1) 父类对象继承

Child.prototype = new Parent("child");

var child = new Child();

child.say(); // "child"

特点:使用这种继承模式,子类不仅仅会继承父类原型上的方法/属性,还会继承父类自身的属性。

这种模式的缺点是,在初始化父类对象指向给子类原型时,并不确定父类构造函数的初始化参数(Child.prototype = new Parent("child");),而且,往往这些参数并不是子类需要的。

(2) 借用构造函数

改造子类:

function Child(){

Parent.apply(this, arguments);

}

特点:使用这种继承模式,子类只会继承父类自身的属性。

缺点很明显,它无法从原型链中继承任何方法/属性。

(3) 共享原型

Child.prototype = Parent.prototype;

这种方式的缺点是,子类原型和父类原型共享一个对象,那么,子类如果修改原型,必然会影响父类。

(4) 临时构造函数

function inherit(Child, Parent) {

var F = function(){}; 

F.prototype = Parent.prototype; 

Child.prototype = new F();

}

特点:利用一个空函数F()充当子类和父类之间的代理,既可以实现父类原型方法/属性的继承,又可以在子类原型上继续扩展方法/属性。

一般,我们可以利用ES5提供的新方法Object.create()来实现此类继承。

Child.prototype = Object.create(Parent.prototype);

2. 通过复制属性实现继承

复制属性分为浅拷贝和深拷贝。

浅拷贝不会复制对象类型,只会简单的将对象引用指向子类,代码如下:

function extendDeep(parent, child) { 

var key; for(key in parent) {  

if (parent.hasOwnProperty(key)){   

if (typeof parent[key] === 'object') {    

child[key] = (parent[key].toString() === "[object Array]")? []:{};

extendDeep(parent[key], child[key]);   

} else {

child[key] = parent[key];

}  

return child;

}

3. "借用方法"模式复用父类函数

如果不想实现父子之间的完全继承,仅仅期望子类实现父类中一个或多个方法,那么可以利用apply, call, bind来调用父类函数,实现复用。

代码如下:

parent.say.call(child, "hello, child!");

Web前端学习之Javascript继承的常用4种方法

今天小编要跟大家分享的文章是关于Javascript继承的常用4种方法。相信很多学习web前端开发技术的小伙伴在学习前端开发的javascript部分的时候,在面向对象的部分就很难走下去了,主要的原因还是逻辑更加复杂了,需要理解的内容比直观的开发布局难一点。

在面向对象编程里,封装和继承是比较重要的,这中间,继承是相对而言比较难理解的,因为javascript的继承方式比较多,也有不同的优缺点。今天小编为大家带来这篇文章就是来和大家一起说一说Javascript继承的常用4种方法,希望能够对你有所帮助。

1、原型链继承

核心:将父类的实例作为子类的原型

缺点:父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了

2、构造继承

基本思想

借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。

因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。

call、apply方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

所以,这个借用构造函数就是,new对象的时候(new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,并且执行Parent里面的代码,而Parent里面用call调用了Person,也就是说把this指向改成了指向新的实例,所以就会把Person里面的this相关属性和方法赋值到新的实例上,而不是赋值到Person上面,所以所有实例中就拥有了父类定义的这些this的属性和方法。

因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

缺点:方法都在构造函数中定义,

只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

3、组合继承

组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用

缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

4、寄生组合继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

缺点:堪称完美,但实现较为复杂

以上就是小编今天为大家分享的关于web前端学习之Javascript继承的常用4种方法的文章,希望本篇文章能够对正在学习web前端技术的小伙伴们有所帮助。想要了解更多web前端知识记得关注北大青鸟web培训官网。

文章转载自公众号:前端研究所

网页名称:继承javascript,继承上亿遗产后豪门老公回来了
文章链接:https://www.cdcxhl.com/article14/dsdsjde.html

成都网站建设公司_创新互联,为您提供外贸建站网站营销网站导航品牌网站建设移动网站建设网站收录

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

微信小程序开发