jQuery -- jQuery源码（一）：核心功能

一、jQuery无new构建实例

1、$就是jQuery的别称

可以在$和jQuery对象挂在在window中，实现全局引用。

给Windows对象扩展一个$的属性，让它拿到jQuery构造函数的引用
可以用$访问到jQuery的构造函数
// jQuery.js
(function(root) {
   
   var jQuery = function(){
   }
root.$ = root.jQuery = jQuery;
})(this)

2、$()就是在创建jQuery的的实例对象

调用$()方法的目的是创建一个实例，构造函数直接调用是当做一个普通的函数来处理的
// jQuery.js
(function(root) {
   
   var jQuery = function() {
   }
})(this)

具体代码：

// jQuery.js
(function(root) {
   
    var jQuery = function() {
   
			console.log('生成一个实例对象');
    };
    root.$ = root.jQuery = jQuery;
})(this)

3、什么是构造函数

①构造函数也是一个普通函数，创建方式和普通函数一样，但习惯上首字母大写（小写也是可以的），用new关键字调用


②和普通函数的区别：
1）调用方式不一样
普通函数调用：直接调用，如，person()
构造函数调用：使用new关键字调用，如，new Person()
2）作用不同
构造函数用来新建实例对象


③构造函数的函数名和类名相同：Person()这个构造函数，Person既是函数名，也是这个对象的类名


④内部用this来构造属性和方法

function Person(name, gender, age) {
   
    this.name = name;
    this.gender = gender;
    this.age = age;
  	this.sayHi=function(){
   
    	alert("Hi")
    }
}
当创建上面的函数以后， 我们就可以通过 new 关键字调用，也就是通过构造函数来创建对象了
var p1 = new Person('张三', '男', 14); // 创建一个新的内存 #f1
var p2 = new Person('李四', '女', 28); // 创建一个新的内存 #f2

⑤构造函数的执行流程
A、立刻在堆内存中创建一个新的对象
B、将新建的对象设置为函数中的this
C、逐个执行函数中的代码
D、将新建的对象作为返回值
其他说法：
1、当以new关键字调用时，会创建一个新的内存空间 #f1，并标记为Person的实例
2、函数体内部的this指向该内存空间 #f1
以上两步：每当创建一个实例的时候，就会创建一个新的内存空间（#f1，#f2），创建#f1的时候，函数体内部的this指向#f1，创建#f2的时候，函数体内部的this指向#f2
3、执行函数体内的代码
给this添加属性，就相当于给实例添加属性
4、默认返回this
由于函数体内部的this指向新创建的内存空间（默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 #f1），而该内存空间（#f1）又被变量p1所接受。也就是说 p1 这个变量，保存的内存地址就是 #f1，同时被标记为 Person 的实例。

⑥普通函数：因为没有返回值，所以为undefined

function person(){
   
	
}
var per = person()
console.log(per) // undefined

⑦构造函数
1）默认返回this

function Person1(){
   
	this.name = 'zhangsan';
}
var p1 = new Person1()
console.log(p1) // Person1 {name: "zhangsan"}
console.log(p1.name) // zhangsan
首先，当用 new 关键字调用时，产生一个新的内存空间 #f11，并标记为 Person1 的实例；
接着，函数体内部的 this 指向该内存空间 #f11；
执行函数体内部的代码；
由于函数体内部的this 指向该内存空间，而该内存空间又被变量 p1 所接收，
所以 p1 中就会有一个 name 属性，属性值为 ‘zhangsan’。

2）手动添加一个基本数据类型的返回值，最终还是返回 this

function Person2() {
   
	this.age = 28;
	return 50;
}
var p2 = new Person2();
console.log(p2) // Person2 {age: 28}
console.log(p2.age);   // 28
如果上面是一个普通函数的调用，那么返回值就是 50

3. 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象

例一：
function Person3() {
   
 this.height = '180';
 return ['a', 'b', 'c'];
}

var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'

例二：
function Person4() {
   
  this.gender = '男';
  return {
    gender: '中性' };
}

var p4 = new Person4();
console.log(p4.gender);  // '中性'

⑧不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？
1）用new调用构造函数，函数内部会发生如下变化：
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象）
用伪程序来展示上述变化：

function Person