JS中的原型应用（继承与扩展）

最新推荐文章于 2023-02-27 16:37:10 发布
VIP文章 最新推荐文章于 2023-02-27 16:37:10 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： prototype 插件机制 js原型的应用 jQuery JS继承与扩展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40870788/article/details/81430161
版权

JS中的原型

原型机制(prototype)是JavaScript中非常重要的机制，通过[[prototype]]，我们可以轻易地实现构造函数与其实例的继承与扩展。

原型的概念大致如下图展示，详情可以参考MDN，本文主要讲原型在实际中的应用。
这里写图片描述

参考jQuery与zepto中的原型机制，原型的应用大致分为以下几个部分：

  • 定义构造函数
  • 定义生成实例接口
  • 定义初始化函数
  • 提供扩展接口（插件机制）
  • 提供对外接口
  • 绑定原型

创建一个属于自己的库文件（Sojourn.js）

(function (window) {
   
  // 定义属于自己的对象
  var Sojourn = {}

  // 定义构造函数
  function S(dom, selector) {
   
    var i, len 
最低0.47元/天 解锁文章
Sojourn2017
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现复杂场景下的js继承，提高性能和代码复用性。（创建多个子类型继承和多个对象，对象之间共享方法，但引用类型值不冲突）
Qiang1455155765的博客
04-29 260
创建多个子类型继承和多个对象，在对象之间共享方法，但引用类型值不冲突。在我们开发过程中，当多个对象存在多个相同的方法和多个相似的属性时，这时候我们就会考虑提升性能和代码的复用性，简单场景下利用原型和自定义构造函数能够实现（前面文章有介绍过点击查看），但是在复杂场景下就不够用了，本篇文章将介绍如何在复杂环境下利用寄生组合式继承的方法实现，话不多说，先上代码为敬！！！
内置类的原型上扩展方法
qq_35895679的博客
08-04 216
本文要点： 内置类的原型上扩展方法： 内置类的原型上会默认存在很多常用的方法 Array.prototype / String.prototype / Object.prototype … 这些方法实例都可以调用，但是内置的方法不一定能满足所有的开发需求，有很多方法需要自己来编写 向原型上扩展的方法，调用起来比较的方便 实例.方法() 方法执行的时候，方法中的THIS就是当前处理的实例 1）扩展的方法名字最好设置前缀，例如：Myxxx，防止自己扩展的方法替换了内置的方法 2）THIS的结果一定是对象
浅析js中的原型和原型链及其使用场景
铁锤妹妹的博客
02-27 2489
最近浏览网站学习的时候，看到了这个话题，感觉面试里也经常会被问到；所以查阅了不少文章，想总结一下，方便以后翻看。理解的会比较浅显，希望能多多交流，以后理解更深层的也会持续在这里更新。
原型扩展
qq_1724201421的博客
04-29 264
有两种方式可以扩展原型，不管哪种方式都会对原型所在的原型链产生影响。（1）属性扩展对构造函数的原型进行属性扩展后，扩展结果对继承此原型的对象都有效。通常，用在扩展ECMAScript对象的功能，例如ECMAScript中的字符串类型，都没有trim()（去掉字符串中的空格）方法，而通过原型的扩展功能，就可以给ECMAScript中的字符串都扩展此功能，例如：String.prototype.tri...
JavaScript中6种常见的继承方式
a1239361527的博客
10-16 995
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。
彻底搞懂——js中实现继承的几种方式
weixin_58691935的博客
07-06 455
通过原型链（有缺陷基本不单独使用） 利用构造函数（有缺陷基本不单独使用） 组合继承（原型链和构造函数方式的结合，优势互补） 原型式继承（效果上与原型链的方式有类似，即引用值始终会在相关对象间共享） 寄生式继承（二次封装原型式继承，并拓展） 寄生式组合继承（引用类型继承的最佳模式） ES6中引入class关键字定义类，用extends实现继承（解决了上述6种方式的各种弊端，算个语法糖）............
浅析JavaScript原型继承的陷阱
01-19
JavaScript默认采用原型继承。虽然没有类(class)的概念，它的函数(function)可以充当构造器(constructor)。构造器结合this，new可以构建出类似Java的类。因此，JavaScript通过扩展自身能模拟类式(class-based)继承。...
JavaScript原型继承_动力节点Java学院整理
01-21
但是，JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。 但是办法还是有的。我们先回顾Student构造函数： function Student(props) { this.name = props.name || '...
Javascript原型链的原理详解
11-22
本文实例分析了Javascript原型链的原理。分享给大家供大家参考，具体如下： 一、JavaScript原型链 ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一...
declare.js:使用用于继承和原型扩展的紧凑表示法创建构造函数
05-08
使用用于继承和原型扩展的紧凑表示法创建构造函数。 安装 对于节点 npm install oop-declare 凉亭 bower install declare 用法 var Parent = declare(null,{ init:function(params){ declare.mixin(this,params); ...
JavaScript高级程序设计 扩展–关于动态原型
12-10
而仅仅在继承的时候对【动态原型】的瓶颈作了说明。即在作子类继承的时候，不能通过动态原型的方式来实现。 原文大致如下： 继承机制不能采用动态化的原因是：prototype对象的唯一性。实例代码： 代码如下: function...
js原型对象及常见使用情况
qq_40371335的博客
10-30 321
js原型对象及常见使用情况 prototype 属性的作用 function Cat(name, color) { this.name = name; this.color = color; this.meow = function () { console.log('喵喵'); }; } var cat1 = new Cat('大毛', '白色'); var cat2 = new Cat('二毛', '黑色'); cat1.meow === cat2.meow // false
原型拓展方法+继承
weiweiweb888的博客
09-29 153
原型拓展方法+继承 扩展原型上的方法 数组indexOf的扩展 // console.log(Array.prototype.indexOf); // 在标准浏览器返回函数，在IE8及下返回undefined if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (val, index) { index = typeof index === 'undefined' ? 0 : index;
深入理解JS原型及其扩展
遛狗的代码的博客
09-09 1157
相信各位一定看到过Array.prototype.slice.call(arguments,1);这样的写法。（我是清楚的记得在看函数柯里化的时候遇到的，这儿我们不讨论它） 先查slice的定义： 上面的写法和我们看到MDN的例子看起来有很大的差别，其实殊途同归。 首先，简单向大家提及一下call，apply，bind的区别: apply:(...).apply(context,[
JS中原型的应用
qq_39940390的博客
08-31 558
前提说明：个人自学随笔，若有兴趣可供读者了解 <!doctype html> <html> <head> <title>Document</title> </head> <body> <script type="text/javascript"> //交流现象:当原型属性与本...
JavaScript原型的实际应用
weixin_34408717的博客
12-29 939
原型是javascript的核心概念也是较难理解的，本篇主要介绍原型的一些概念，且与构造函数属性、构造函数方法的区别，最后结合Jquery与Zepto在实际工作中的应用进行分析介绍，希望对您有帮助。 快速导航 原型概念 原型模式的执行流程 构造函数实例属性方法 构建原型属性方法 原型字面量创建对象 字面量创建对象 构造函数创建对象 原型对象的重写需要注意的问题 原型的实际应用 ...
通过原型扩展对象
explore
03-25 688
原型对象 系统默认自动为js函数生成空的原型(prototype)对象。如果某个函数是类的构造函数，那么它的原型对象可以被用来对类进行扩展。 当给构造函数的prototype属性赋值时，他们会自动扩展到该类的所有实例。使用prototype属性为对象添加属性 eg: <script> function Cat(name){ this.name = name;
javascript中扩展Array类的原型
ForestCat的专栏
04-02 3052
在js中，只要是类就有原型，不管它是自定义类还是js的内置类,我们可以通过修改内置类的原型，让js基本类型的对象获得其它功能。 下面，我们来扩展一下Array类的原型.  //扩展Array类,实现一个each函数， //功能：循环数组中的每个元素。 // 参数: fun是一个回调函数，可以理解成是一个接口，调用each方法时，要提供这个接口的一个实现函数。 Array.protot
js中怎么理解原型、原型链
最新发布
09-05
原型和原型链的概念在JavaScript中是非常重要的，它们使得对象可以通过继承的方式共享属性和方法，提高了代码的可复用性和扩展性。同时，原型链也是JavaScript实现对象的继承机制的基础。我们可以通过修改原型链上的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值