原型

silencezwm 发布于2019-04-23 13:28 / 3073人阅读

摘要：每个第一次使用的开发者都感到惊叹的太神奇了究竟是怎么做到的使用控制赞叹前人之余探究其本源才是前端开发者应该做的事社区常常说不要重复造轮子可是啊连轮子都造不出来又怎么去了解在什么环境下用什么轮子怎么样才可以造成更加优秀的轮子不同阶段对前端有不

每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom

赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子,

可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子,

不同阶段对前端有不同的理解,作为一名程序员,本就是没有尽头,静下心来,和别人比一比,多借鉴前人的发展,取其精

华去其糟粕,不要闭门造车,做一名不断学习的前端开发者

回头看来jq已经逐渐在不断的学习中揭开了他神秘的面纱,让我想看看美丽的$是怎么出生的

jQuery只有一个全局变量$ 那一定是挂载在window上面的

(function (window){
    var jQuery = function (selects) {
       
    }
    window.$ = jQuery;
 }
)(window)

可爱的$就指向JQuery的实例了当我们$("#id")就相当于 jQuery("#id")

那么现在就要处理获取到的dom元素


(function (window) {
  function jQuery(selects) {
    return new jQuery.fn.init(selects)
  }
  jQuery.fn = {}  //创建挂载函数
  jQuery.fn.init = function (selects) {
    var dom = [].slice.call(document.querySelectorAll(selects))
    var i = 0;
    var len = dom ? dom.length : 0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selects = selects || " ";
  }
  window.$ = jQuery; //注意这里jQuery指向window
})(window)

现在我们就已经将$()里面的dom捕捉到了,请转化成为数组,利于后面的操作

下一步就是在原型链上面创建jquery的方法了

(function (window){
  var jQuery = function (selector){
    return new jQuery.fn.init(selector)    //这里必须构造函数要不放怎么去获取节点信息
  }
  jQuery.fn = {
    val(){
      return this[0].innerHTML
    }
      //.......等等方法
  }
  var int = jQuery.fn.init = function (selector) {
    var dom = [].slice.call(document.querySelectorAll(selector)) 
    var i,len = dom?dom.length:0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    console.log(len,selector);

    this.length = len;
    this.selector = selector || " "
  }

  int.prototype = jQuery.fn

  window.$ = jQuery;
})(window)

我们实现了类似jq的val()方法了

试验一下





  
  
  
  title



  jquery test 1

最关键的一点使用jQuery.fn的方式利于拓展,上面代码体现了这一点,假如我们现在jq上面创建自己的方法,就把方法挂在jQuery.fn上面相当于在原型上面加方法

这里可以看到jquery一切都是基于原型,所以呀,讲原型,我用jquery来说明,感受到原型的强大

云服务器 idc机房托管原型原型链基于原型原型方法原型声明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1917.html

关于构造函数、原型、原型链、多种方式继承

摘要：可以看出这个构造函数是由创建出来的，而我们看下的隐式原型，竟然是指向了的原型，也就是也是由创建出来的。例如，其他构造函数的原型将覆盖属性并提供自己的方法。将构造函数的执行对象赋给这个空对象并且执行。把对象的隐式原型指向构造函数的原型。构造函数与实例对象又是这个经典的问题，嗯，我先来写个构造函数，然后实例化一个对象看看。 function Person(name) { this....

zxhaaa 2019-08-23 15:57 评论0 收藏0
《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
JavaScript进阶 - 1. 原型和原型链的概念

摘要：对应的关系图如下讲解了构造函数和原型对象之间的关系，那么实例对象和原型对象之间的关系又是怎么样的呢下面讲解。原型对象的指向的是构造函数和本身没有属性，但是其原型对象有该属性，因此也能获取到构造函数。 JavaScript进阶 - 1. 原型和原型链的概念我们好多经常会被问道JavaScript原型和原型链的概念，还有关于继承，new操作符相关的概念。本文就专门整理了原型和原型链的概念...

elisa.yang 2019-08-23 18:33 评论0 收藏0
JavaScript...原型与继承中的原型链...

摘要：原型原型是什么在中函数是一个包含属性和方法的类型的对象而原型就是类型对象的一个属性在函数定义时就包含了属性它的初始值是一个空对象在中并没有定义函数的原型类型所以原型可以是任何类型原型是用于保存对象的共享属性和方法的原型的属性和方法并不会影响原型原型是什么在JavaScript中函数是一个包含属性和方法的Function类型的对象而原型(Prototype)就是Function...

MiracleWong 2019-08-26 12:14 评论0 收藏0
JavaScript中的原型与原型链

摘要：前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。前言作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？国际惯例，让我们先抛出问题：什么是原型、原型链它们有什么特点它们能做什么怎么确定它们的关系或许你已经有答案，或许你开始有点疑惑，无论是 get 新技能或是简单的温习一次，让我们一起去探究一番吧如果文章中有出现纰...

laoLiueizo 2019-08-23 16:58 评论0 收藏0
JS高程读书笔记--第六章原型继承

摘要：高程读书笔记第六章理解对象创建自定义对象的方式有创建一个实例，然后为它添加属性和方法。创建了自定义的构造函数之后，其原型对象默认只会取得属性至于其他方法都是从继承而来的。 JS高程读书笔记--第六章理解对象创建自定义对象的方式有创建一个Object实例，然后为它添加属性和方法。还可用创建对象字面量的方式属性类型 ECMAScript在定义只有内部采用的特性时，描述了属性的各种特征...

EasonTyler 2019-08-21 10:56 评论0 收藏0