JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

1.javascript中以函数来表示类：

一般函数是小写开头：function foo()

类开头是大写：function Foo()

实例化类：　　obj = new Foo()

其他属性就同类是一致的

Name = "root"
Age = 

function Foo(name,age){
    this.Name = name;
    this.Age = age;
    this.Func = function(){
        console.log(this.Name,this.Age);  #this是当前对象 输出 aaaa 16
        (function(){
            console.log(this.Name,this.Age);　　#内联函数中：this是window，输出root 18
        })();
    }
}

obj1 = Foo('aaaa',)
obj1.Func()

与类的思想来考虑就出来结果了，干扰项都不是问题

再比如：

function Func(){
　 this.age = ;
    this.func=function(){
　　　　console.log(this)  #obj
　　      function inner(){
              console.log(this) #window
           }
        inner()
    }
}

2.补充：this关键字

函数中：

function func(){
    console.log(this);
}

this永远对于window全局变量
Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
其中包含：

1. age:16
2. Foo:ƒ Foo(name,age)
3. Func:ƒ ()
4. Name:"aaaa"
5. alert:ƒ alert()
6. ......其他一堆全局函数，变量等数据

类中：

function Func(){
　　 this.age = 19;
    this.func=function(){
　　　　console.log(this)
　　}
}

obj2 = new Func()
obj2.func()
打印出来：

1. Func {age: 19, func: ƒ}
1. age:19
2. func:ƒ ()
3. __proto__:Object

this代表当前对象

3.js中无字典，只有对象

obj3 = {
    Name:'root',
    Age:,
    func:function(){
        console.log(this.Name)
    }
} 

obj3相当于new了一个对象
obj3.func()
obj3.Name
obj3.Age

补充：注意点：

Name = "ads"
Age = 11
obj6 = {
    Name : "ret",
    Age : ,
    func:function(){
        console.log(this.Name);  #ret是在对象中，所以是当前对象

        function inner(){
            console.log(this.Name)　　#ads，是在内联函数中，所以是window
        }
        inner()
    }
}

若是想在内联函数中获取当前对象：（可以将this对象传入）

obj6 = {
    Name : "ret",
    Age : ,
    func:function(){
        console.log(this.Name);  #ret是在对象中，所以是当前对象
        var that=this;
        function inner(){
            console.log(that.Name)　　#ret，是使用了当前对象（that在内联函数作用域中没有找到，就去上一级寻找，发现that是this当前对象）
        }
        inner()
    }
}

补充事件触发使用的this：

                <div class="col-xs-5">
                    <img id="check_code_img" onclick="ChangeImg(this);" src="/check_code.html"> #此处传入了该节点对象
                </div>

js:

        function ChangeImg(ths){　　#函数处理，接收ths代替该节点，所以其中并没有在函数中声明this,所以在打印$(this)时是window对象
            ths.src = ths.src.split('.html')[]+'.html?'+Math.random();
            console.log(ths)　　//该节点  
　　　　　　　console.log($(ths)  //也是该节点对象
            console.log($(this))    //window   若是将传参也设置为this，那么这里的this，就是节点对象，$(this)就是jquery对象
        }

测试：（重点结论）

            $("#username").click(function(){　　//默认会传递this节点对象进去进行调用
                console.log($(this))
                $(this).val()　　 //$(this)是jquery对象，可以调用jquery函数
                this.value=7777　　　　//this是该节点对象，只可以调用document节点的函数
            })

补充：在jquery中$(this)使用，也会代表一类元素结点，而非某一个：

                    <ul class="pagination">
                        <li><a>上一页</a></li>

                        <li class="active"><a></a></li>

                        <li><a></a></li>

                        <li><a>下一页</a></li>
                    </ul>

        目的获取其中点击的页码值
　　　　  $(".pagination li a").click(function(){
            console.log($(this))　　　　　　//是jquery对象
            console.log($(this)[0].text)  //text是js对象的函数，这里我们使用了jquery对象，需要进行转换为js对象则需要使用[0]
　　　　　　　console.log($(this).text())　　//使用jquery函数实现
　　　　　　　console.log(this.text)　　　　//直接使用js对象当前操作对象，来获取数据是最好的
　　　　　})

详细参考：https://www.imooc.com/wenda/detail/331557?t=201208

总结重点：

事件触发，传递到函数中的this是当前操作对象，this.

我们使用$(this)是将当前操作节点对象进行封装，成为jquery对象，更加简便使用函数操作。但是若是想像上面那样操作js函数，任然需要转换为js对象

$(this)[]，这种“jQuery对象”加下标的方式可以将“jQuery对象”转换为“js对象”，这样我们就可以使用“js对象”的属性和方法了；
$(this)，使用$()包装“js对象”，是一种将“js对象”转换为“jQuery对象”的方式，这样我们就可以使用“jQuery对象”的方法了。

原生js实现jquery：https://www.zhihu.com/question/36733934

前端：

<input type="button" class="Btn_test" onclick="bind(this);" value="">
<input type="button" class="Btn_test" onclick="bind(this);" value="">
<input type="button" class="Btn_test" onclick="bind(this);" value="">

自定义$和jQuery（两个都可以用）

var $ = function jQuery(domObj){
    {#console.log(domObj)#}
    var objToReturn = {0:domObj,length:domObj.length};　　//其中我们可以封装jquery的函数，进行使用
    objToReturn.click = function(func){
        for(var i=0;i<objToReturn.length;i++){
            {#console.log(objToReturn[0])#}　　//objToReturn[0]是传递过来的原数据，我们需要对他进行处理
            objToReturn[0][i].addEventListener("click",func);   //用addEventLister会重复绑定事件,所以使用onclick只会触发绑定的最新
            {#objToReturn[i].onclick=func#}                     //但是在jquery使用的就是addEventLister，所以可以重复绑定多个事件
        }
    }
    return objToReturn
}

调用：

    function bind(ths){
        $(ths).click(function(){　　　//自定义$使用成功
            alert(ths.value);
        })
    }

或者（下面更加像）：

    var domButton = document.getElementsByClassName("Btn_test");

    $(domButton).click(function() {
        alert(this.value);
    })

事件绑定可以看：http://www.cnblogs.com/ssyfj/p/8492101.html