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); })