JavaScript Simple Explain and Use
阿新 • • 發佈：2018-12-09
Javascript 說明：
JavaScript 和 Java 之間幾乎沒有任何關係。
JavaScript原名為LiveScript,他的作用只是為了處理一些複雜的動態網頁。
目前，JS是遵循ECMAScript(ES6)規定的。
JavaScript 在HTML5中匯入方式：
1. 元素匯入：
<body>
<button onclick="alert('hello')"> 點我</button>
</body>2. 內部文件匯入:
<head> <script> alert('hello'); </script> </head>
3. 外部文件匯入:
<head>
<script type="text/javascript" src="js/test.js">
</script>
</head>JavaScript 在HTML5中3種提示框（輸出方式）
1. alert()
<script>
alert('hello');
</script> 2. comfirm()
<script>
confirm('hello');
</script> 3. prompt()
<script> prompt('hello'); </script>
瀏覽器控制檯輸出
1. console方式：
- console.log()
//控制檯上輸出
var obj=[{name:1,age:22},{name:1,age:22}];
console.log(obj)；- console.dir()
//控制檯上輸出,比log更詳細
var obj=[{name:1,age:22},{name:1,age:22}];
console.dir(obj)；- console.table()
//控制檯上輸出，以表的形式展現 var obj=[{name:1,age:22},{name:1,age:22}]; console.table(obj)；
** 結果：**
| name | age |
|---|---|
| 1 | 22 |
| 2 | 23 |
2. document方式：
<script>
// 向網頁上面直接寫
document.write('hello');
</script>JavaScript 型別檢查
typeof: 檢測資料型別的運算子
typeof 1 => "number";instanceof: 檢測某個例項是否屬於這個類
constructor: 獲取當前例項的構造器
JavaScript 中function：
1. 自動執行函式
1. ~function(){}()
2. !function(){}()
3. +function(){}()
4. -function(){}()這四種function（）就是一種對函式 -->;(function(n){})(10) ===>自動執行(該function是集定義與執行傳參為一體的函式),注意function名字前面有個分號
;該作用就是區分函式塊的，否則在執行函式時,會有函式巢狀。上面這四種符號都是為了簡化.
2. 普通函式
function A()
{
alert('test');
}如果在呼叫的時候
A這樣就只是會返回函式的地址，而A()則會執行A函式
3. this
1:
function fun(){
console.log(this) // this--> window
}
2:
var obj = {fn:fn}; first fn is attr,and second is function fn();
fn(); // this --> window
obj.fn(); // this --> obj
3:
function sum(){
fn(); // this --> window
}注：
- this 指向的object 要看function 執行前面是否有
.：
- 如果前面沒有
.：
- this 永遠指向 window/根物件
- 如果有
.：
- this 指向
.之前的物件
- 自動執行函式中的this 永遠指向window
this --> window
4.工廠模式
- 工廠模式：
function createPerson(name,age){
var obj = new Object() // 或者 var obj = {};
obj.name = name;
obj.age = age;
obj.print = function(){
document.write('name:' + obj.name + 'age:' + obj.age);
}
return obj;
}
var person = createPerson(name,age);- 普通建構函式模式：
function Person(namme,age){
//預設建立例項返回
this.name = name;
this.age = age;
this.print = function(){
document.write('name:' + this.name + 'age:' + this.age);
}
}注：
- 工廠模式，最重要的是在函式執行裡 ，new了 一個物件，最後返回這個物件。
- 普通模式，不會返回任何東西
- JS 不存在過載，後者會覆蓋前者
最後說下:
function test(){
.name = function(){ // 這裡"." 作用是啥？
}
}上面函式中
.點號的作用是啥？