三种JavaScript模拟实现封装的方式及写法区别分享

 继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  js中有很多实现继承的方法,今天我给大家介绍其中的三种吧。下面通过本文来了解下js模拟实现封装的三种方法,需要的朋友参考下吧,希望能帮助到大家。

1.在 Object类上增加一个扩展方法

//声明一个父类function Person(name){ this.name=name; this.age=age; this.say=function(){   alert("我叫"+this.name); }}//声明一个子类 function Student(){ this.no=no; this.study=function(){  alert("我在学习!"); }}// 通过循坏,将父类对象的所有属性和方法,全部赋给子类对象Object.prototype.extend=function(parent){ for(var i in parent){   this[i].parent[i]; }}var p=new Person("张三",12);var s=new Student("1234567");//子类对象调用这个扩展方法s.extend()console.log(s);

登录后复制

上述实现继承的原理:

通过循坏,将父类对象的所有属性和方法,全部赋给子类对象。关键点在于for-in循坏,即使不扩展Object,也能通过简单的循坏实现操作。

但是用这种方法实现继承也有一些缺点:

立即学习“Java免费学习笔记(深入)”;

①无法通过一次实例化,直接拿到完整的子类对象。而需要先拿到父类对象和子类对象两个对象,再手动合并;

②扩展Object的继承方法,也会保留在子类的对象上。

再来看看第二种实现继承的方法吧~

2.使用原型继承

在介绍这种方法之前先来说两个概念:原型对象与原型

1、prototype:函数的原型对象

①只有函数才有prototype,而且所有函数必有prototype

②prototype本身也是一个对象!

③prototype指向了当前函数所在的引用地址!

2、__proto__:对象的原型!

①只有对象才有__proto__,而且所有对象必有__proto__

②__proto__也是一个对象,所以也有自己的__proto__,顺着这条线向上照的顺序,就是原型链。

③函数、数组都是对象,都有自己的__proto__

//声明父类function Person(name,age){   this.name=name;   this.age=age;   this.say=function(){    alert("我叫"+this.name);   }}//声明子类   function Student(no){   this.no=no;   this.study=function(){    alert("我在学习!我叫"+this.name+"今年"+this.age");   }}//将父类对象赋给子类的prototype  Student.prototype=new Person("张三",14);//拿到子类对象时,就会将父类对象的所有属性和方法,添加到__proto__var s=new Student(); s.study();

登录后复制

使用原型继承的原理:

将父类对象,赋值给子类的prototype,那么父类对象的属性和方法就会出现在子类的prototype中。那么,实例化子类时,子类的prototype又会到子类对象的__proto__中,最终,父类对象的属性和方法,会出现在子类对象的__proto__中。

这种继承的特点:

①子类自身的所有属性都是成员属性,父类继承过来的属性都是原型属性。

②依然无法通过一步实例化拿到完成的子类对象。

第三种实现继承的方法:

call()和apply()还有bind(),这三种方法很相似,只有在传参方面有所不同。

function Person(name,age){  this.name=name;  this.age=age;  this.say=function(){    alert("我叫"+this.name);    }}function Student(no,name,age){  this.no=no;  this.study=function(){    alert("我在学习!");  }//将父类函数的this,指向为子类函数的thisPerson.call(this,name,age);}var s=new Student(12,"张三",24);console.log(s);

登录后复制

三个函数的唯一区别,在于接受func的参数列表的方式不同,除此之外,功能上没有任何差异!

三个函数的写法(区别):

call写法:func.call(func的this指向的obj,func参数1,func参数2,…);

apply写法:func.apply(func的this指向的obj,[func参数1,func参数2,…]);

bind写法:func.bind(func的this指向的obj)(func参数1,func参数2,…);

相关推荐:

一个Vue插件从封装到发布详解

jquery中封装函数传递当前元素

jquery和ajax实现省市区三级联动封装和不封装两种方式

以上就是三种JavaScript模拟实现封装的方式及写法区别分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2790185.html

(0)
上一篇 2025年3月8日 18:52:25
下一篇 2025年2月18日 04:39:10

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • javascript浏览器用户代理检测脚本方法详解

    本文主要为大家带来一篇javascript浏览器用户代理检测脚本实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 以下是完整的用户代理字符串检测脚本,包括检测呈现引擎、平台、Wind…

    编程技术 2025年3月8日
    200
  • javascript中的typeof和类型判断详解

    本文主要为大家带来一篇基于javascript中的typeof和类型判断(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 typeof ECMAScript 有 5 种原始类型(pr…

    编程技术 2025年3月8日
    200
  • AngularJs用户登录交互及验证、阻止FQ处理详解

    本文主要为大家详细介绍了angularjs用户登录问题处理,包括交互及验证、阻止fq处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 1. 静态页面搭建及ng的form表单验证实现:               登…

    编程技术 2025年3月8日
    200
  • Angular js综合操作方法详解

    本文主要介绍了angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,需要的朋友可以参考下,希望能帮助到大家。 小编在上篇文章给大家介绍了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断…

    编程技术 2025年3月8日
    200
  • Vue.js 2.5新特性分享

    本文主要和大家分享vue.js 2.5新特性,vue 2.5 level e 已发布,在原来2.x的基础上做了很多相应改进和对 bug 的修复,目前 2.5 系列最新的版本为 2.5.2,本文给大家介绍vue 2.5 新特征,需要的朋友参考…

    2025年3月8日
    200
  • Angular.js排序查询功能的实现

    本文主要介绍了angularjs添加排序查询功能的实例代码,需要的朋友可以参考下,希望能帮助到大家。 废话不多说了,直接给大家贴代码了,具体代码如下所示: var app=angular.module(“myapp”,[]); app.co…

    编程技术 2025年3月8日
    200
  • Vue.js2.0变化小结分享

    有小伙伴觉得vue更新太快了导致课程所讲知识和现在vue的版本不符,从而报错,本文主要和大家分享vue.js2.0变化小结,希望能帮助到大家。 1.关于Vue中$index获取索引值已经取消,多用于多个元素的操作,像ul中的li,通过v-f…

    编程技术 2025年3月8日
    200
  • 使用PM2管理nodejs进程详解

    本文主要介绍了详解使用pm2管理nodejs进程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务…

    2025年3月8日
    200
  • js获取伪元素的content实例分享

    本文主要为大家带来一篇使用js获取伪元素的content实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会…

    2025年3月8日
    200
  • javascript如何计算对象长度

    本文主要为大家详细介绍了javascript计算对象长度的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 计算对象的长度,即获取对象属性的个数,具体如下 方法一:通过for in 遍历对象,并通过hasOwnPr…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论