JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)
1.javascript中以函数来表示类：
一般函数是小写开头：function foo()
类开头是大写：function Foo()
实例化类： obj = new Foo()
其他属性就同类是一致的
Name = "root" Age = 18 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',16) obj1.Func()
与类的思想来考虑就出来结果了，干扰项都不是问题
再比如：
function Func(){ this.age = 19; 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: ƒ, …}
其中包含：
类中：
function Func(){
this.age = 19; this.func=function(){
console.log(this)
} } obj2 = new Func()
obj2.func()
打印出来：
this代表当前对象
3.js中无字典，只有对象
obj3 = { Name:'root', Age:18, func:function(){ console.log(this.Name) } }
obj3相当于new了一个对象
obj3.func()
obj3.Name
obj3.Age
补充：注意点：
Name = "ads"
Age = 11
obj6 = { Name : "ret", Age : 16, func:function(){ console.log(this.Name); #ret是在对象中，所以是当前对象 function inner(){ console.log(this.Name) #ads，是在内联函数中，所以是window } inner() } }
若是想在内联函数中获取当前对象：（可以将this对象传入）
obj6 = { Name : "ret", Age : 16, 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')[0]+'.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(6666) //$(this)是jquery对象，可以调用jquery函数 this.value=7777 //this是该节点对象，只可以调用document节点的函数 })
补充：在jquery中$(this)使用，也会代表一类元素结点，而非某一个：
<ul class="pagination"> <li><a>上一页</a></li> <li class="active"><a>1</a></li> <li><a>2</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)[0]，这种“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="123"> <input type="button" class="Btn_test" onclick="bind(this);" value="456"> <input type="button" class="Btn_test" onclick="bind(this);" value="789">
自定义$和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); })
