js深刻淺出

時間 2019-11-30
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>js 深刻淺出 筆記 第六，七章</title>

</head>
<body>


    <script type="text/javascript">
//*********************************************************** 
// console.log(); 向web控制檯輸出一條消息.
    //將var s;提早
    // ps:變量，函數的聲明都會被前置。
        console.log(s);
        var s;

    //會報錯，nfe未定義
        var func = function nfe(){};    // alert(func === nfe);

    //func類型爲function
        console.log(typeof func);            

    //當即調用①
        Function("var s = 100;console.log(s);")();

    //當即調用②
        (function current(){
            console.log("當即調用");
        })();


    //總結：
/*
                    函數聲明        函數表達式        函數構造器
前置                    true
    
容許匿名                            true            true
    
當即調用                         true            true                    
     
在定義該函數的做用    true
域經過函數名訪問

沒有函數名                                        true
*/
//*********************************************************** 



//*********************************************************** 
//全局的this
console.log(this === window);//true
this.a = 37;
console.log(a);//37

var test="test";
var sss = function(){
    return this.test;
}
console.log(sss());


//做爲對象方法的函數的this
    var o = {test:1000};
    function objthis(){
        return this.test;
    }
    o.f = objthis;//此時o.f的類型爲function
console.log(o.f());//1000


//對象原型鏈上this
var q = {w:function(){return this.a+this.b;},c:32};
//該Object.create()方法使用指定的原型對象和屬性建立一個新對象。
//返回值：具備指定原型對象和屬性的新對象。
var e = Object.create(q);
e.a = 1;
e.b = 4;
console.log(e.w());    


//構造器中的this
function myClass(){
    this.a =37;
    this.b = function(){
        console.log("b");
    }
}

var o = new myClass();//此時this指向空的對象，原型爲myClass.phototype
o.b(); //b //默認this爲返回值

function myClass2(){
    this.a =37;
    return {a:38};
}

var o = new myClass2();
console.log(typeof o);//object
console.log(o.a); //38
//ps.通常都是用Object.create根據字面量對象來建立對象，不提倡用new


//call/apply方法與this
function add(c,d){
    return this.a+this.b+c+d;
}
var o = {a:1,b:3};
add.call(o,5,7);
add.apply(o,[10,20]);
function bar(){
    console.log(Object.prototype.toString.call(this));
}
bar.call(7);
//*********************************************************** 




//*********************************************************** 
//apply/call方法
// apply或call會引用第一個參數的上下文環境
function foo(x,y){
    console.log(x,y,this);
}

foo.call(100,1,2);//1,2,Number(100)
foo.apply(true,[3,4]);//3,4Boolean(ture)
foo.apply(null);//undefined,undefined,window
foo.apply(undefined);//undifined,undifined,window

//bind方法
function getConfig(colors,size,otherOptions){
    console.log(colors,size,otherOptions);
}
var defaultConfig = getConfig.bind(null,"#cc0000","1024*768");
defaultConfig("123");//#cc0000 1024*768 123
defaultConfig("456");//#cc0000 1024*768 456
//科裏化暫時沒有理解
//*********************************************************** 





//*********************************************************** 
// 閉包
for(var i=0;i<3;i++){
    function a(){
        alert(i);
    }
}
a();

//http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());
//*********************************************************** 
//js做用域(全局，函數，eval)
for(var item in s={a:1,b:2}){
    console.log(s[item]);
}
    console.log(item);
//做用域鏈   

(function(){
    alert("zhixing");
})();

//*********************************************************** 



    </script>



</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。