jQuery源码学习-构造函数-Johnson

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

如此优秀的一个代码库，即便没有以前流行，也是有很多地方值得学习的。

本文并非讲解jquery源码，而是记录从源码学习到的思想、技术等

构造函数与继承

JavaScript是一门面向对象的编程语言，但是与传统面向对象语言不同的是，JavaScript没有提供class关键字，并且JavaScript的是基于原型继承的面向对象语言。那么，在JavaScript中编写类的过程，必定与传统的面向对象语言有所区别。

传统的类与继承

在ES6之前，都是通过创建构造函数的方式来创建一个类，比如：

// Book类的原型
const BookPrototype = {
  getName () {
    return this.name
  }
}

// Book类
function Book (name, author, content) {
  this.name = name
  this.author = author
  this.content = content
}

// Book类继承自 BookPrototype
Book.prototype = BookPrototype

const book = new Book('金瓶梅', '佚名', '此处省略999999999字')
console.log(book.getName())

BookPrototype为Book类的原型（基类），使用new关键字创建的Book实例，都会包含BookPrototype里面的属性和方法。这里刚开始然我有些迷惑，参考经典的面向对象语言，基类应该也是一个类，这里却是一个对象字面量。首先，需要深刻明白一点: JavaScript中，一切皆是对象。比如一个函数，我们可以给它加上任何的属性

function bar () {}
bar.sayHi = function () {
  console.log('hi~')
}
bar.sayHi()
// hi~

其次，也是这里的迷惑点，JavaScript是基于原型的继承，意思就是，一个构造函数要继承某些属性方法，只需要将这些方法放到一个容器（对象）里，再赋值给prototype属性就可以在实例中访问。当我们需要创建静态方法/变量的时候，可以直接在构造函数上绑定（一切皆对象）。在JavaScript中，静态方法不会被继承。

function Book (name, author, content) {
  this.name = name
  this.author = author
  this.content = content
}
Book.prototype.getName = function () {
  return this.name
}
// 静态方法
Book.foo = function () {
  console.log('foo')
}

Book.foo()

ES6中的类与继承

在ES6标准中，提出了class关键字，我们可以使用类似于Java创建类的语法来创建一个JavaScript类。

class Book {
  constructor(title, author, content) {
    this.title = title
    this.author = author
    this.content = content
  }

  getName () {
    return this.title
  }
}

const book = new Book('金瓶梅', '佚名', '此处省略999999999字')
console.log(book.getName()) // 金瓶梅

我们可以直接通过extends关键字进行类的继承

class StoryBook extends Book {
  constructor(title, author, content, storyType) {
   super(title, author, content)
   this.storyType = storyType
  }

  getStoryType () {
    return this.storyType
  }
}
book = new StoryBook('金瓶梅', '佚名', '此处省略999999999字', 'fairyTale')
book.getName() // 金瓶梅
book.getStoryType() // fairyTale

ES6中的class和extends实际上都是语法糖，根本上还是通过前一节中的方法来创建类和继承类。JavaScript基于原型的继承方式，赋予了更多的灵活性，jQuery的构造函数就是一个非常好的实例。

jQuery入口

从jQuery最基本的使用出发，会发现jQuery好像不是一个构造函数。确实是这样，当我们获取一个元素const box = $('.box1')，将box打印出来看看。

从打印结果可以看出几个东西：

box对象是jQuery.fn.init的一个实例
改实例是一个包含类数组集合对象
改对象有一个prevObject属性，指向了两一个对象的引用

接下来就分别从这几点出发来分析jQuery源码。

jQuery构造函数

通常情况下，我们会以函数调用方式（$('selector')）获取一个jQuery对象，同时，我们也可以使用new $('selector')来获取jQuery实例，我们先来思考这一个问题：如何同时满足函数调用和构造函数调用。实际上不需要太多思考就能想到如下代码：

function myQuery (selector) {
  if (!(this instanceof myQuery)) {
    return new myQuery(selector)
  }
  // ...
  return this
}

但是我们发现jQuery并没有这样写，通过观察发现我们得到的是一个jQuery.fn.init的实例，下面就开始进入源码看看jQuery.fn和jQuery.fn.init是个什么东西。

// 源码
jQuery = function( selector, context ) {

  // The jQuery object is actually just the init constructor 'enhanced'
  // Need init if jQuery is called (just allow error to be thrown if not included)
  return new jQuery.fn.init( selector, context );
};

这是jQuery的大门，所有故事从这里开始，至此我们知道了jQuery构造函数实际上是个工厂函数，它返回了另一个类的实例。接下来继续看看jQuery.fn

jQuery.fn = jQuery.prototype = {
  // The current version of jQuery being used
  jquery: version,

  constructor: jQuery,

  // The default length of a jQuery object is 0
  length: 0,
  // ...
};

init = jQuery.fn.init = function( selector, context, root ) {
  // ...
  return this
};

// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

可以看出jQuery.fn就是jQuery.prototype的一个引用，而init是原型上的一个构造函数。里面有非常核心的一行代码init.prototype = jQuery.fn。这行代码将jQuery的原型共享给了init构造函数，jQuery和init的原型是同一个，这样jQuery对象就能访问jQuery原型上的方法和变量。

到这里基本清楚了jQuery创建实例到底是怎么一回事，至于和我们刚开始想的不一样，主要原因是更方便的进行对象的初始化操作。

jQuery插件

说到了原型顺便再看一下jQuery的插件，jQuery的插件开发基本上使用过jQuery的人都知道怎么操作，分为两种方式，一种方式是直接在$.fn上面添加方法，另一种是调用$.fn.extend()方法。前面这两种方法都是对jQuery的原型进行扩展，在其实例中才能使用，还有一个$.extend()方法，是用来扩展jQuery的静态方法。

// 源码
jQuery.extend = jQuery.fn.extend = function() {}

源码中，jQuery.extend和fn.extend引用的是同一个方法，但是作用的上下文却不同。这里是非常巧妙的一个点，当我们直接使用$.extend()时添加的是静态方法，而是用来$.fn.extend()时添加的是实例方法。

小结

jQuery并没有非常高级的技术，内部原理都是非常简单的逻辑封装，但是整个内部架构设计的非常好，有许多值得学习的巧妙设计。

参考文章

https://www.cnblogs.com/SheilaSun/p/4779895.html