JavaScript 進階擴充

標籤：偽造   cli   log   win   dom   xxxx   ret   script   報錯   

- 範圍相關
1.
function func(){
if(1==1){
var v= 123;
}
console.log(v);
}
func()
A. 報錯(Java,C#) B. 123(python，對) C.undefined
=》 JavaScript/python是以函數為範圍，非括弧為範圍
=》 Java,C#以括弧為範圍
2.
xo = ‘root1‘;
function func(){
var xo = ‘root2‘;
function inner(){
console.log(xo);
}
inner();
}
func();
範圍鏈
// root2
3.

xo = ‘root1‘;
function func(){
var xo = ‘root2‘;
function inner(){
console.log(xo);
}
return inner;
}
result = func();
result();
// 範圍鏈在函數調用之前已經建立，當尋找變數時，根據最開始建立的範圍尋找
// root2

4.
xo = ‘root1‘;
function func(){
var xo = ‘root2‘;
function inner(){
console.log(xo);
}
var xo = ‘root3‘
return inner;
}
xo = "root4"
result = func();
result();

//root 3

5.
var xxxx;
console.log(xxxx);


function func(){
console.log(xo);
var xo = ‘123‘;
console.log(xo);
}
func()
// 提前聲明,JS特有的
1. 先行編譯：
var xo;令xo=undefined；
2. 執行

6.
function func(num){
console.log(num); // function
num = 18;
console.log(num); // 18

function num(){
}
console.log(num); // 18
}
func(666);

a. 先行編譯 AO active object 使用中的物件
先編譯參數：
AO.num = undefined
AO.num = 666
再編譯變數：
如果AO中有num，則不做任何操作
否則 AO.num = undefined
最後編譯函數：
AO.num = function num(){
}

b. 執行


7.

function func(num){
console.log(num); // function
function num(){
}
console.log(num); // function
num = 18;

console.log(num); // 18
}
func(666);


先編譯參數：
AO.num = undefined
AO.num = 666
再編譯變數：
如果AO中有num，則不做任何操作
否則 AO.num = undefined
最後編譯函數：
AO.num = function num(){
}

8.
function func(){
console.log(xo);
var xo = 123;
}
func()

編譯：
參數：
AO為空白
變數：
AO.xo = undefined
執行：

- 函數和物件導向相關
1.
function func(arg){
console.log(this,arg);
}
func(18);
// func.call(window,20);
// func.apply(window,[30]);


(function(arg){
console.log(this,arg);
})(123)

在函數被執行時，預設this是代指window對象

function func(){
window.nn = ‘root‘;
//nn = ‘root‘;
this.nn = ‘root‘;
}
func()
console.log(nn);

=====>
a. 在函數內部，預設都有this變數。預設情況下，執行函數時 this=window
b. 使用 函數名.call 或者 函數名.apply 可以對函數中的this主動設定值

document.getElementById(‘id‘).onclick = function(){
// this
}

document.getElementById(‘id‘).onclick.call(DOM對象)


2. 在JS中麼有字典類型
只有對象偽造成字典形式

var dict = {
name: ‘alex‘,
age: 18
}
等價於
var dict = new Object(); # 表示建立空字典
dict.name = ‘alex‘;
dict.age = 18;



function Foo(name){
this.Name = name
}

Foo(‘root‘) # 當做函數時，this預設是window
var dict1 = new Foo(‘root1‘) # 當做類時，this是 dict1 同py self
// Foo.call(dict1,‘root1‘)
var dict2 = new Foo(‘root2‘) # 當做類時，this是 dict2


====
function Foo(name){
this.Name = name;
this.Func = function(){
console.log(this.Name);
}
}
# 當做函數
Foo(‘root1‘)
window.Name
window.Func()

# 當做類
obj = new Foo(‘root2‘)
obj.Name
obj.Func()

# 直接對象
dict = {
Name: ‘root3‘,
Func: function(){
console.log(this.Name);
}
}

# dict = new Object();
# dict.Name = ‘root3‘;
# dict.Func = function(){
console.log(this.Name);
}
dict.Func()
==========================》 誰調用函數，this就是誰。 函數()執行時候預設window.函數()


誰調用函數，this就是誰。 函數()執行時候預設window.函數()
每一個函數裡都有一個this
Name = ‘666‘;
var dict = {
Name: ‘root‘,
Age: 18,
Func: function(){
// this等於dict
console.log(this.Name); // root

function inner(){
console.log(this.Name); // 666
}
window.inner();
}
}

dict.Func();

============================
誰調用函數，this就是誰。 函數()執行時候預設window.函數()
每一個函數裡都有一個this
變數尋找順序，範圍鏈
Name = ‘666‘;
var dict = {
Name: ‘root‘,
Age: 18,
Func: function(){
// this等於dict
console.log(this.Name); // root
// that 等於dict
var that = this;

function inner(){
// this=window
console.log(that.Name); // root
}
window.inner();
}
}

dict.Func();

3. 原型

function Foo(name){
this.Name = name;
}
// 原型
Foo.prototype = {
Func: function(){
console.log(this.Name);
}
}

obj1 = new Foo(1)
obj2 = new Foo(2)
obj3 = new Foo(3)

JavaScript 進階擴充