摘要:的值為對象使用構造函數調用函數如果函數調用前使用了關鍵字,則是調用了構造函數。基于類的基于原型的定義類定義原型對象定義類的構造函數定義對象的構造函數實例化對象將構造函數關聯到原型實例化對象注意中引入的概念依然是基于原型的原理。
一、函數定義
JS使用關鍵字function定義函數,有三種定義方式(有時候也說有三種聲明方式)。
1.函數聲明
function functionName(parameters) { //執行代碼 } 注意:函數聲明后不會立即執行,在需要的時候調用。
2.函數表達式
var x = function(a,b) {return a+b;}//匿名函數,函數存儲在變量x中 var z = x(4,3);//通過變量名x來調用匿名函數
3.Function()構造函數/函數對象
即,通過內置的JS函數構造器(Function())定義
var addFunction = new Function("a","b","return a+b"); var res = addFunction(3,4);//調用
注意:new Function("a","b","return a+b")是不對的,會產生如下錯誤:
☆ 在實際使用中,盡量避免使用new關鍵字,所以第3種方法不常用。
JavaScript是一種prototypical(原型)類型語言,在創建之初,是為了迎合市場的需要,讓人們覺得它和Java是類似的,才引入了new關鍵字。Javascript本應通過它的Prototypical特性來實現實例化和繼承,但new關鍵字讓它變得不倫不類。
JS函數有4中調用方式,每種方式的不同在于this的初始化。
函數中的代碼在函數被調用后執行。
1.作為一個函數調用
function myFunc(a,b) { return a + b; } myFunc(3,4); //返回20,在瀏覽器的控制臺才能看到該輸出
myFunc函數不屬于任何對象,但是JS默認它是全局對象。
在HTML中,默認全局對象是HTML頁面本身,因此函數myFunc屬于HTML頁面。
在瀏覽器中,頁面對象是瀏覽器窗口(Window 對象),即myFunc自動變為window對象。
即,myFunc()和window.myFunc()一樣。
注意:這是函數調用的常用方法,但是不是良好的變成習慣。全局變量、方法或者函數容易造成命名沖突的bug。
2.函數作為方法調用
即,將函數定義為對象的方法。
var myObject = { firstName:"John",//對象myObject的屬性 lastName: "Doe",//屬性 fullName: function () { return this.firstName + " " + this.lastName; }//方法 } myObject.fullName(); // 返回 "John Doe"
fullName方法是一個函數,函數屬于對象myObject。
this的值為myObject對象
3.使用構造函數調用函數
如果函數調用前使用了new關鍵字,則是調用了構造函數。
// 構造函數: function myFunction(arg1, arg2) { this.firstName = arg1;//構造函數中的this關鍵字沒有任何值,其值在函數調用實例化對象(new object)時創建。 this.lastName = arg2; } // 構造函數的調用會創建一個新的對象,新對象會繼承構造函數的屬性和方法 var x = new myFunction("John","Doe"); x.firstName; // 返回 "John"
4.作為函數方法調用函數
JS中,函數是對象,有它的屬性和方法
call()和apply()是預定義的函數方法,兩個方法可用于調用函數,兩個方法的第一個參數必須是對象本身。
function myFunc(a, b) { return a * b; } myObj = myFunc.call(myObj, 10, 2); // 返回 20 //call從call的第二個參數傳入函數的參數
function myFunc(a, b) { return a * b; } myArray = [10, 2]; myObj = myFunction.apply(myObj, myArray); // 返回 20 //apply傳入參數數組
在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成為 this 的值, 即使該參數不是一個對象,比如,傳入null和undefined也會保持原樣不被轉換為window對象。
在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代
三、關鍵字this的理解函數在運行時,在函數內部自動生成的一個對象,只能在函數內部使用個。一般來說,JS中,this指向函數執行時的當前對象。
函數沒有被自身的對象調用時,this的值就會變成全局對象(瀏覽器中是瀏覽器窗口,window對象)
總結:隨著函數使用場合的不同,this 的值會發生變化。但是有一個總的原則,那就是this指的是,調用函數的那個對象。
function myFunc(){ return this; } myFunc();//[object Window]
情況1.純粹的函數調用
全局性調用,this代表全局對象。
var x = 1; function test() { console.log(this.x); } test(); //1
情況2.作為對象方法的調用
當函數作為某個對象的方法調用時,this指的就是這個上級對象。
function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m(); //1
情況3.作為構造函數調用
構造函數是什么呢?
——就是通過這個構造函數,可以生成一個新的對象。
此時,this就是這個新的對象。
function test() { this.x = 1; }//構造函數 var obj = new test();//通過構造函數生成一個新對象 obj.x;//1
分析:
var x = 2;//創建一個全局變量 function test() { this.x = 1; }//構造函數 var obj = new test();//通過構造函數生成一個新對象 console.log(obj.x);//1 console.log(x); //2
x的運行結果為2,說明全局變量x的值并沒有改變.
情況4.apply調用
apply()是函數的一個方法,作用是改變函數的調用對象。第一個參數就表示改變后的調用這個函數的對象。也就是this指的就是apply的第一個參數。
當apply的參數為空的時候,默認調用全局對象。
var x = 0; function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m.apply();//0 //this指的是全局變量 obj.m.apply(obj);//1 //this指的是obj四、數據類型
見文章“JS重要知識點記錄(一)”
五、cookieCookie用于存儲web頁面的用戶信息。是一些數據,存儲于電腦上的文本文件中。
當web服務器向瀏覽器發送web頁面時,在連接關閉后,服務端不會記錄用戶的信息。而Cookie的作用就是用于解決“如何記錄客戶端的用戶信息”:
當用戶訪問web頁面時,他的名字可以記錄在Cookie中。
當用戶下一次訪問該頁面時,可以在cookie中讀取用戶訪問記錄。
Cookie以名/值對形式存儲,如下所示:
username = Joy Ann
當瀏覽器從服務器上請求web頁面時,屬于該頁面的Cookie會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。
六、面向對象(JS的基于原型與Java的基于類的區別)基于類的面向對象語言:Java和C++,是構建在兩個不同實體的概念之上:類和實例。
類(class):一類抽象的事物,定義了這類事物的屬性(即方法和變量)
實例(instance):類的一個成員。實例具有父類所有的屬性,還可以包括自身獨有的屬性。
基于原型的語言不存在類和實例的區別:只有對象。
基于類的 | 基于原型的 |
---|---|
1.定義類 | 1.定義原型對象 |
2.定義類的構造函數 | 2.定義對象的構造函數 |
3.實例化對象 | 3.將構造函數關聯到原型 |
4.實例化對象 |
注意:ES6中引入的class概念依然是基于原型的原理。
推薦一篇描述很清晰的文章:https://segmentfault.com/a/11...
小結一下:
1、prototype 就是函數的一個屬性
2、prototype屬性本身也是一個對象
3、當我們把一個函數Foo()當做構造器來創建一個新的對象f = new Foo()的時候,新對象f就可以訪問到Foo()函數的prototype對象中的屬性
4、new在創建一個新的對象f的時候,會賦予新對象f一個屬性(_proto_)指向構造器的 prototype 屬性
5、當訪問一個對象的屬性(包括方法)時,首先查找這個對象自身有沒有該屬性,如果沒有就查找它的原型(也就是 proto 指向的 prototype 對象),如果還沒有就查找原型的原型(prototype 也有它自己的 __proto__,指向更上一級的 prototype 對象),依此類推一直找到 Object 為止
6、一個對象,它有許多屬性,其中有一個屬性指向了另外一個對象的原型屬性;而后者也有一個屬性指向了再另外一個對象的原型屬性。這就像一條一環套一環的鎖鏈一樣,并且從這條鎖鏈的任何一點尋找下去,最后都能找到鏈條的起點,即 Object;因此,我們也把這種機制稱作:原型鏈。
7、既然 proto 可以訪問到對象的原型,那么為什么禁止在實際中使用呢?
這是一個設計上的失誤,導致 proto 屬性是可以被修改的,同時意味著 JavaScript 的屬性查找機制會因此而“癱瘓”,所以強烈的不建議使用它。
測試 JavaScript 庫(即引用它):
主要的 jQuery 函數: $() 函數(jQuery 函數)
比較使用JS語法和JQuery語法實現同一個功能的區別:
//JS方式 function myFunction() { var obj=document.getElementById("h01"); obj.innerHTML="Hello jQuery"; } onload=myFunction;
//JQuery方式 function myFunction() { $("#h01").html("Hello jQuery"); } $(document).ready(myFunction);//注意JQuery返回的是JQuery對象,因而不能使用HTML DOM對象的屬性或方法
JQuery允許鏈接,即鏈式語法。
function myFunction() { $(#id1).attr("style","color:red").html("hello JQuery") }八、常用框架
Vue
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100653.html
摘要:前言接上篇前端筆試題面試題記錄上。默認值,不脫離文檔流,,,,等屬性不生效。。不脫離文檔流,依據自身位置進行偏離,當子元素設置,將依據它進行偏離。。 前言 接上篇前端筆試題面試題記錄(上)。趁清明小長假,把上篇剩下的部分也寫一下,因為最近比較忙這篇已經拖了很久了。現在剛剛開始銀四了,應該還是有些小伙伴在找工作,時間還不算太晚,希望本篇可以幫到這些小伙伴。 個人博客了解一下:obkoro...
摘要:前言接上篇前端筆試題面試題記錄上。默認值,不脫離文檔流,,,,等屬性不生效。。不脫離文檔流,依據自身位置進行偏離,當子元素設置,將依據它進行偏離。。 前言 接上篇前端筆試題面試題記錄(上)。趁清明小長假,把上篇剩下的部分也寫一下,因為最近比較忙這篇已經拖了很久了。現在剛剛開始銀四了,應該還是有些小伙伴在找工作,時間還不算太晚,希望本篇可以幫到這些小伙伴。 個人博客了解一下:obkoro...
摘要:新年前,我們最后來談一談以太坊安全性的特點。以太坊使用了一個硬分叉解決了這一問題。合約擁有者利用函數的異常處理和調用棧大小限制進行攻擊。結語通過這幾期對參考文獻的學習,我們看到了一些以太坊合約中設計的弱點。 新年前,我們最后來談一談以太坊安全性的特點。 不可能修改的bug 當合約公開在區塊鏈上之后,它就不能去修改了。相應的,合約中出現的任何 bug 也沒有機會改正。如果希望能夠修改bu...
摘要:新年前,我們最后來談一談以太坊安全性的特點。以太坊使用了一個硬分叉解決了這一問題。合約擁有者利用函數的異常處理和調用棧大小限制進行攻擊。結語通過這幾期對參考文獻的學習,我們看到了一些以太坊合約中設計的弱點。 新年前,我們最后來談一談以太坊安全性的特點。 不可能修改的bug 當合約公開在區塊鏈上之后,它就不能去修改了。相應的,合約中出現的任何 bug 也沒有機會改正。如果希望能夠修改bu...
閱讀 3316·2021-11-16 11:45
閱讀 4387·2021-09-22 15:38
閱讀 2841·2021-09-22 15:26
閱讀 3347·2021-09-01 10:48
閱讀 827·2019-08-30 15:56
閱讀 715·2019-08-29 13:58
閱讀 1487·2019-08-28 18:00
閱讀 2160·2019-08-27 10:53