js中的6中继承方式

摘要:
oo语言支持两种继承:接口继承和实现继承,js中函数没有方法签名,所以只支持实现继承1.原型链继承实现思想:原型对象也是对象,将原型对象的prototype指向父类的原型(将父对象的实例赋给子对象的原型),即可实现继承//原型链实现继承//父类functionParents(){this.surname='王';this.getSurna

oo语言支持两种继承:接口继承和实现继承,js中函数没有方法签名,所以只支持实现继承

1.原型链继承

实现思想:原型对象也是对象,将原型对象的prototype指向父类的原型(将父对象的实例赋给子对象的原型),即可实现继承

<script type="text/javascript">
    //原型链实现继承
        //父类
        functionParents(){
            this.surname='王';

            this.getSurname=function(){
                console.log(this.surname);
            }
        }
        //子类
        functionChild(){

        }
        //将父类的实例赋给子类的原型,实现继承
        Child.prototype=newParents();
        var c=newChild();
        c.getSurname();
    
</script>

测试结果:

js中的6中继承方式第1张

2.借用构造函数继承

实现思想:使用apply或者call()在子类的构造函数中执行父类的构造函数

<script type="text/javascript">
    //借用构造函数
        functionParents(){
            this.surname='李';

            this.getSurname=function(){
                console.log(this.surname);
            }
        };
        functionChild(){
            //执行父类的构造函数
            Parents.call(this);
        };
        var c=newChild();
        console.log(c);

</script>

测试结果:

js中的6中继承方式第2张

3.组合继承

实现思想:使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承

<script type="text/javascript">
        //组合继承
        functionParents(surname){
            this.surname='李';
        }
        Parents.prototype.getSurname=function(){
            console.log(this.surname);
        }
        functionChild(age){
            //继承属性
            Parents.call(this);
            //自己特有的属性
            this.age=age
        }
        //继承方法
        Child.prototype=newParents();
        Child.prototype.constructor=Child;
        Child.prototype.getAge=function(){
            console.log(this.age);
        }

        var p=newParents();
        console.log(p)
        
        var c=new Child(12);
        console.log(c)
</script>

测试结果:

js中的6中继承方式第3张

4.原型式继承:

实现思想:通过构建一个函数,参数为父对象,函数内部创建一个新对象,将父对象赋给新对象的原型,然后返回新对象。

<script type="text/javascript">
    //原型式继承

        //方式一
        //传入一个对象
        //function extend(o){
        //function F(){};
        ////将对象o赋给F的原型
        //F.prototype=o;
        ////返回F对象的实例
        //return new F();
        //}
        //var parents={
        //surname:'李',

        //getSurname:function(){console.log(this.surname)}
        //}
        ////调用extend函数来实现继承
        //var child=extend(parents);
        //child.getSurname();

        //方式二
        var parents={
            surname:'李',

            getSurname:function(){
                console.log(this.surname);
            }
        }
        var child=Object.create(parents);
        //定义子对象私有属性和方法
        child.age=11;
        child.getAge=function(){
            console.log(this.age);
        }
        child.getSurname();
        child.getAge();

</script>

5.寄生式继承

实现思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式(创建子对象私有方法)来增强对象,最后再像真的是它做了所有工作一样返回对象

<script type="text/javascript">
    //寄生式继承
        functioncreate(original){
            //调用函数创建对象
            var clone=Object.create(original);
            //以某种方式增强对象(创建子对象私有方法)
            clone.sayHi=function(){
                console.log('hello');
            }
            returnclone;
        }
        var parents={
            surname:'李'}
        var child=create(parents);
        console.log(child)
        child.sayHi();

</script>

6.寄生组合式继承

实现思想:通过借用构造函数来继承属性,通过原型链的混成形式来继承方法(使用寄生式继承来继承父类的原型,然后将结果指定给子类的原型)。

<script type="text/javascript">
    //寄生组合式继承
        functioninheritProto(parents,child){
            var o=Object.create(parents.prototype);
            o.constructor=child;
            child.prototype=o;
        }
        //父类构造函数
        functionParents(surname){
            this.surname=surname;
        }
        Parents.prototype.getSurname=function(){
            console.log(this.surname);
        }
        //子类构造函数
        functionChild(surname,age){
            Parents.call(this,surname);
            this.age=age;
        }
        inheritProto(Parents,Child);

        Child.prototype.getAge=function(){
            console.log(this.age);
        }
</script>

免责声明:文章转载自《js中的6中继承方式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇微信内 H5 页面自定义分享Vue前端实现登陆功能下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js 把对象按照属性名的字母顺序进行排列

var obj = {name: "zhangsan", age: 8, ace: 5, nbme: "lisi"};//要排序的对象 function objKeySort(obj) {//排序的函数 var newkey =Object.keys(obj).sort();   //先用Object内置类的keys方法获取要排序对象的属性...

JS实现刷新iframe的方法

<iframe src="http://t.zoukankan.com/1.htm" name="ifrmname" id="ifrmid"></iframe> 方案一:用iframe的name属性定位 <input type="button" name="Button" value="Button"onclick="docu...

require.js

Javascript模块化编程:require.js的用法 一、为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。   <script src="http://t.zoukankan...

AJAX技术框架及开发工具 转

常见的AJAX框架有: DWR - Web Remoting Buffalo - Web Remoting (based on prototype) prototype - JS OO library openrico - JS UI component (based on prototype) dojo - JS library and UI co...

JS最新技术ES6,结合Vue全局注册,实现Axios封装配置插件!

接下来,带来js全新技术ES6,结合Vue install全局组件实现Axios封装,以代码形式讲解。 1、请求封装 //file:src/api/http/http.js import axios from 'axios' axios.create(); axios.interceptors.request.use((config)=>{ //...

JS 英文不截断单词截取

canRun View Code <html> <head> <title>JS substr</title> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <meta ht...