js知識點

時間  2019-12-11
標籤 知識 欄目 JavaScript 简体版
原文   原文鏈接 
    
     var arr = [2,4,6,8,10,12,14,16,18,20];
 for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } for(var i in arr){ console.log(arr[i]); } arr.forEach(function (val,index) { console.log(val); }); 
　　　　　　　// jquery寫法 $.each(arr, function(index,val) { console.log(val); });


    









   function add(a,b) {
        return a(b);


    }
    function add1(a) {
        return a+10;

    }
    var c  = add(add1,10);
    alert(c);

    //遞歸
    function digui(num) {
 if(num == 1){
 return 1;
 }
 return num*arguments.callee(num-1);
 }

    /**
     * 工廠模式建立對象
     * @param name
     * @param age
     * @returns {Object}
     */
    function peopleFactory(name,age) {
        var people = new Object();
        people.name = name;
        people.age = age;
        people.run = function () {
            return this.name+""+this.age;
        }
        return people;
    }


    /**
     * 構造函數建立對象
     * @param name
     * @param age
     * @constructor
     */
    function People(name,age) {
        this.name = name;
        this.age = age;
        this.run = function () {
            return this.name+""+this.age;
        }
    }

    var o = new Object();

    People.call(o,"張三",12);
    alert(o.run())

    /**
     * 原型
     * @constructor
     */
    function People1() {}
    People1.prototype.name = "張三";
    People1.prototype.age = 12;
    People1.prototype.run = function () {
         return this.name+""+this.age;
    }

    var p1 = new People1();
    var p2 = new People1();
    //p1.run == p2.run;
    //p1.__proto__ 原型對象指針   IE不支持;

    //判斷一個對象引用是否是指向原型對象
    //People1.prototype.isPrototypeOf(p1);
    p1.name = "李四";
    //若是實例對象和原型有同樣的屬性，先查找實例中的屬性
    alert(p1.name);
    
    //刪除實例中的屬性
    delete p1.name;
    //判斷實例中是否存在屬性，不能判斷原型
    p1.hasOwnProperty("name");
    //判斷屬性是否存在，在實例中或原型中，一個有就返回true
    //"name" in p1;

 

 //使用字面量的方式建立原型對象
    fuction Box(){}

    Box.prototype = {
        name:"zhangsan",
        run:function () {
            return this.name;
        }
    }

    var box = new Box();
    box.run();
    //box.constructor指向Object  而不是指向BOX 由於原型從新定義了對象
    //若是要指向BOX

    Box.prototype = {
        constructor:Box,//強制指向Box
        name:"zhangsan",
        run:function () {
            return this.name;
        }
    }

    //原型重寫會覆蓋，不會保留原來任何信息
    Box.prototype = {
        name:"lisi"
    }
    //沒有run()

    //缺點  不能傳參，內容共享
   //解決辦法    獨立的用對象，共享的用原型，原型能夠訪問對象中的屬性或方法
 

 

//動態原型模式     解決封裝性
    function Box(name,age) {
        this.name = name;
        this.age = age;
        //new Box時原型對被調用屢次
        //解決  只執行一次
        if(typeof this.run != "function"){
            Box.prototype.run1 = function () {
                return this.name+this.age;
            }
        }

    }

    //繼承
    function Parent() {
        this.name = "zhangsan";
    }

    function Child() {
        this.age = 100;
    }

    var child = new Child();
    //經過原型鏈 繼承  會繼承屬性及原型
    //子類原型指向父類實例
    Child.prototype = new Parent();
    //缺點不能傳參
    //經過對象冒充實現繼承,但不能繼承原型中的屬性或方法

    //構造函數李的方法，放在構造裏，每次實例化都會分配一個內存地址，會浪費內存，最好放在原型裏
//原型式繼承
    function obj(o) {
        function F(){}
        F.prototype = o;
        return F;
    }

    //寄生組合繼承 解決 對象冒充和原型鏈繼承組合    由於會調用兩次  NEW

 



 
 
 
 
 
 
  
/*var a = function add() {
    return "aaa";
}*/
//alert(a());
(function () {
    //alert(this)
    //alert("bbbbb");
})();

//把匿名函數的返回值付給b
/*var b = (function (name) {
    alert("11111");
    return "cccc";
})(name);*/
//alert(b);

//匿名函數傳參

//函數裏放匿名函數   閉包
function add() {
    return function () {
        return "dsdsd";
    }
}

//獲取最裏邊的返回值
//alert(add()());

 
  
 
   
var People =(function () {
        function People() {
            //類中不能寫let
            this.name = "張三";
            alert("aaaaa");
        }
        People.prototype.getName11 = function () {
            alert('1212');
            return "bbbbb";
        };
        return People;
    }());

    var p = new People();
    alert(p.getName11())
 
  
 
  
 
 
  




//閉包返回局部變量
function a() {
    var age = 100;
    return function () {
        return age;
    }
}

//閉包會把局部變量駐留在內存中，至關於全局變量

function b() {
    var age = 100;
    return function () {
        age++;
        return age;
    }
}

var bb= b();
bb();
bb();
bb();
//可讓age累加
bb=null;//過分使用閉包會下降性能

//循環裏的匿名函數的取值問題
function c() {
    var arr = [];
    for (var i = 0;i<5;i++){
        arr[i] = function () {
            return i;
        }
    }
    return arr;

}


function d() {
    var arr = [];
    for(var i =0;i<5;i++){
        arr[i] = (function (num) {
            //經過計算把返回值1,2,3,4,5賦值給arr[i]
            return num;
        })(i)

    }
    return arr;
}

//閉包中this指向window
    
var e = {
    getName :function () {
        //這裏this指向E
        var that = this;
        return function () {
            //中的對象指向window
            return "ddd";
        }
    }
}    

//塊級做用域   js沒有塊級做用域
function f() {
    for(var i=0;i<5;i++){

    }
    var i;
    alert(i);//5   從新定義也不會影響以前聲明初始化的數據
}

//模擬塊級做用域
(function () {
    //放到匿名函數中
})();

function H() {
    this.name = "zhangsan";//公有變量
    this.run = function () {//公有函數

    }

}


//私有化
function I() {
    var name = "張三";//私有變量
    function run() {//私有函數

    }
}

(function (a,b) {
    alert(a);

})(window,'2');
 
 
 
 
 
 
 
 
 
 
  
        //alert('1');

        //window.onload = function () {
            //document.getElementById("div").innerHTML = "asdfdf";
            //alert('2');

           /* document.onclick = function (evt) {
                //IE Window.event
                var e = evt||Window.event;
                var keys = [];

                if(e.ctrlKey){
                    keys.push("ctrl");
                }
                if(e.altKey){
                    keys.push("alt");
                }
                if(e.shiftKey){
                    keys.push("shift");
                }
                //alert(keys);
            }*/
           
           

           
           
           //冒泡
            /*document.onclick = function () {

                alert('document');
            }
            document.documentElement.onclick = function () {
                alert("html");
            }
            document.body.onclick =function () {
                alert('body');
            }
            document.getElementById('div').onclick =function () {
                alert('div');
            }
            /!*document.getElementsByTagName('div').onclick = function () {
                alert('div');
            }*!/
            document.getElementsByTagName('input')[0].onclick = function () {
                alert(this);
                alert('input');
            }*/


            //對象操做可使用數組操做來完成
            /*window['onload'] = function () {

                alert('111');
            }*/

            //模擬onload
            function addEvent(obj,type,fn) {
                var saved = null;
                if(typeof obj['on'+type]=='function'){
                    saved = obj['on'+type];
                }
                obj['on'+type] = function () {
                    if(saved) saved();
                    fn();

                }
            }
            //點擊太多會出現瀏覽器卡死，重複調用須要移除

            //時間會被覆蓋，監聽不會，但要移除
            //2 相同函數屏蔽的問題
            function init() {

            }

            //window.addEventListener('load',init,false);
            //註冊多個監聽能夠屏蔽
            //window.addEventListener('load',init,false);

            window.addEventListener('load',function () {
                //this能夠傳遞
                var div = document.getElementById('div').addEventListener('click',function () {
                    //this指向Div
                    alert(this);
                })


            },false)
            //IE9如下不支持
 
 
 
 
 
  
       //模塊概念  遵循開閉原型，對擴展開放，對修改關閉

        var module = (function () {

            var hello = 'hello';

            function info() {
                var name = "zhangsan";
                var age = 20;
                return {
                    name:name,
                    age:age
                }
            }

            return {
                hello:hello,
                info:info
            }

        })();

        console.log(module.info().name);
        console.log(module.hello);

 
  
 
   
        //模塊擴展
        var module1 = (function (module) {

            function add() {
                console.log(module.hello)
            }
            
            module.tianjia = function () {

                console.log("添加module1的方法")
            }

            return{
                add:add,
                module:module
            }

        })(module||{});
        //**********************module=null時會報錯，或者沒有返回對象時沒法掛載， 因此若是爲null或undifind 時賦值爲{}



        console.log(module1.add());
        console.log(module1.module.tianjia());
 
  
 
  
 
  
 
 
  


 
 
 
 
 
 
 
 
  
//時間綁定 綁定多個事件  只執行最後一個 前邊的會被覆蓋
    /*var div = document.getElementById('div');
    div.onclick = function () {
        alert('1');
    }

    div.onclick = function () {
        alert('222');
    }*/

    document.onclick = function () {
        alert('1');
    }


    document.onclick = function () {
        alert('222');
    }
 
 
 
 
 
  
//事件監聽 不會被覆蓋 都會執行，必須移除
    document.addEventListener('click' ,function () {
        alert('1');
    });

    document.addEventListener('click' ,function () {
        alert('22');
    });
 
 
 
 
 
 
 
 
 
 
 
  
element.clientHeight     在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條）
element.clientWidth     在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條）
 
 
 
 
 
  
element.offsetHeight     返回，任何一個元素的高度包括邊框和填充，但不是邊距
element.offsetWidth     返回元素的寬度，包括邊框和填充，但不是邊距
element.offsetLeft     返回當前元素的相對水平偏移位置的偏移容器
element.offsetParent     返回元素的偏移容器
element.offsetTop     返回當前元素的相對垂直偏移位置的偏移容器
 
 
 
 
 
  
element.scrollHeight     返回整個元素的高度（包括帶滾動條的隱蔽的地方）
element.scrollLeft     返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離
element.scrollTop     返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離
element.scrollWidth     返回元素的整個寬度（包括帶滾動條的隱蔽的地方）
 
 
 
 
 
  
鼠標/鍵盤事件對象
屬性
屬性    描述    DOM
altKey    返回當事件被觸發時，"ALT" 是否被按下。    2
button    返回當事件被觸發時，哪一個鼠標按鈕被點擊。    2
clientX    返回當事件被觸發時，鼠標指針的水平座標。    2
clientY    返回當事件被觸發時，鼠標指針的垂直座標。    2
ctrlKey    返回當事件被觸發時，"CTRL" 鍵是否被按下。    2
Location    返回按鍵在設備上的位置    3
charCode     返回onkeypress事件觸發鍵值的字母代碼。     2
key     在按下按鍵時返回按鍵的標識符。     3
keyCode     返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。     2
which     返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。     2
metaKey    返回當事件被觸發時，"meta" 鍵是否被按下。    2
relatedTarget    返回與事件的目標節點相關的節點。    2
screenX    返回當某個事件被觸發時，鼠標指針的水平座標。    2
screenY    返回當某個事件被觸發時，鼠標指針的垂直座標。    2
shiftKey    返回當事件被觸發時，"SHIFT" 鍵是否被按下。    2
 
 
 
 
 
 
 
 
 
postMessage（iframe間的跨域通訊）
 
 
 
 
http://www.javashuo.com/article/p-rvabgadb-bs.htmlhtml
 
 
 
 
http://www.webhek.com/post/postmessage-cross-domain-post.htmljquery
 
 
 
 
HTML5給咱們帶來了安全的跨域通訊接口，即window.postMessage()方法。web
 
 
 
 
它方法原型是：window.postMessage(msg, domain)，咱們能夠給指定的domain發送msg。而接收msg的iframe只要註冊一個監聽事件就能夠了。跨域
  



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程