Javascript和Jquery的关系（从原型链，this，构造函数角度去钻研）

• 首先我们要搞清楚什么是对象

万物皆对象

字面量 – 字面上显示的东西叫做字面量
包装类 – 没有new的函数声明就是包装类

什么是对象

1.只要是对象就可以有自己的私有属性。
2. 只要是new 出来的都是对象。
3. 不同对象肯定不会相等的。
4. 对象都会有引用机制 。

• 如果不想引用就重新赋值
• 生命周期：
  面向对象 - 最有用的就是私有属性

面向对象的三大特点：

1、封装 2、继承 3、多态

prototype 原型

可以向对象添加属性和方法

var str="66666";
	var str2=new String("1215");
	
	String.prototype.my=99;
	console.log(str.my);  //添加属性
 
 
	String.prototype.your=function(){
		alert("添加了一个方法")
	}
	str.your();
	

this指向

1/在普通函数下 this指向的是 window

2/ 有事件源指向事件源本身

3/ 在定时器下 除es6 this 指向window。

4/ 对象下 this 指向的是自己本身。

继承 - 子级可以用父级的属性和方法,但是父级不能用子级的

function A(){
		this.name = 'abc';
	}
	A.prototype.showName = function(){
		alert(this.name)
	}
 
	function B(){
		//this指向是new出来的B   B.name = 'abc';
		A.call(this);
	}
	B.prototype = A.prototype;
	B.prototype.fn = function(){
		alert('123')
	}
	var objB = new B();
	var objA = new A();
	// alert(B.name)
	objB.showName()
	objA.fn()

Jquery它是javascript的一个轻量级框架，是对javascript进行封装，他的底层全身JS的代码他到底是如何封装的呢 我带大家看看下面
第一部：
//用一个立即执行函数

  (function() {
       
    })()

第二部：

  (function() {
            function JQuery(selector) {                                 
                return new JQuery.prototype.init(selector); //在JQuery函数原型里面添加方法
            }                       
            return window.$ = $ = JQuery;         //创建一个$叫JQuery的函数；
        })()

第三步：

   (function() {
            function JQuery(selector) {
                return new JQuery.prototype.init(selector); //在JQuery函数原型里面添加方法
            }
            JQuery.prototype.init = function(selector) {           //这是模仿JQuery里面DOM节点的方法
                this.length = 0;
                if (selector.indexOf('.') != -1) {
                    var dom = document.getElementsByClassName(selector.slice(1))
                } else if (selector.indexOf("#") != -1) {
                    var dom = document.getElementById(selector.slice(1))
                }
                if (dom.length == undefined) {
                    this[0] = dom;
                    this.length = 1;
                } else {
                    for (var i = 0; i < dom.length; i++) {
                        this[i] = dom[i];
                        this.length++;
                    }
                }
            }
            return window.$ = $ = JQuery;
        })()

接下来就用就是最重要的部分如果将封装好的方法一次性的放入JQuery原型里面
第四步：

(function() {
            function JQuery(selector) {
                return new JQuery.prototype.init(selector); 
            JQuery.prototype.init = function(selector) {
                this.length = 0;
                if (selector.indexOf('.') != -1) {
                    var dom = document.getElementsByClassName(selector.slice(1))
                } else if (selector.indexOf("#") != -1) {
                    var dom = document.getElementById(selector.slice(1))
                }
                if (dom.length == undefined) {
                    this[0] = dom;
                    this.length = 1;
                } else {
                    for (var i = 0; i < dom.length; i++) {
                        this[i] = dom[i];
                        this.length++;
                    }
                }

            }

            JQuery.prototype.css = function(config) { //创建一个用CSS的方法
                for (var i = 0; i < this.length; i++) {
                    for (var attr in config) {
                        this[i].style[attr] = config[attr];
                    }
                }
                return this;
            }
            console.log(JQuery.prototype.init.prototype)
            JQuery.prototype.init.prototype = JQuery.prototype;      就是这个步骤我将这个原型直接赋JQuery.prototype.init.prototype就用单个添加了。
            return window.$ = $ = JQuery;
        })()
        
        console.log($(".div").css({		//模仿的JQuery的方法
            width: "100px",
            height: "100px",
            backgroundColor: 'red'
        }).css({
            color: "pink"
        }))