JavaScript面試基礎小結(高手請無視)

時間 2019-11-07

標籤 javascript 面試基礎小結高手無視欄目 JavaScript 简体版

原文原文鏈接

事件委託

ul#wrap>li.item$*2>{item $}

獲得以下javascript

html<ul id="wrap">
    <li class="item1">item 1</li>
    <li class="item2">item 2</li>
</ul>

一個監聽，多個函數綁定php

jsdocument.getElementById('wrap').addEventListener("click", function(e) {
        if (e.target.nodeName === "LI") {
            console.log("ok");
            switch(e.target.className){
                case "item1":
                    f1();
                    break;
                case "item2":
                    f2();
                    break;
                default:
                    alert("not a li node");
            }
        };
    },false)

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

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

JSONP

標籤的src屬性並不被同源策略(同協議、域名、端口)所約束，因此能夠獲取任何服務器上腳本並執行。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。html

以上是網上摘抄，根據本身的理解寫下以下代碼前端

js//jsonp.html

 function getName(data){

            console.log(data.name);

        }

        var scriptP = document.createElement("script");

        scriptP.src = "http://localhost:8000/reponse.php?id=1&&callback=getName";

        window.onload=function(){
            document.body.appendChild(scriptP);
        }

php文件以下java

php//reponse.php
<?php
    $getId = $_GET["id"];
    $getCalFun = $_GET["callback"];

    $json = array(
       "id" => $getId,
       "name" => "zhangsan"
    );

   echo $getCalFun+'('+json_encode($json)+')';
?>

但卻報錯了Uncaught SyntaxError: Unexpected token <，不知道哪裏出錯了，往大嬸指出...node

原理很簡單，客戶端獲取數據根據需求動態添加script，並使jsonp的服務端拼接腳本觸發函數。ajax

This

jsvar ob = {};

ob.x = 1;
ob.f = function(){
    this.x = 2;
}
ob.f();

console.log(ob.x); // => 2

從上面的代碼能夠得知，this是引用對象，並且是能夠更改指定的對象。算法

主要應用有兩種call和applynpm

js
        function change(s,v){
            if(s > v){
                console.log("s >v");
            }else{
                console.log(" s < v");
            }
        }
        change.call(2,3);// 當前this 指向window
        ...
        function changeColor(s,v){
            this.style.s = v;
        }

        var box = document.querySelector(".box");

        changeColor.call(box, "backgroundcolor" , "blue"); //當前this指向changeColor

call和apply的區別只是apply只接受兩個參數，第二個參數是數組形式。json

疑問：

jsvar obj = {
    x : 100,
    y : function(){
        setTimeout(
            function(){ alert(this.x); }    //這裏的this指向的是window對象，並非咱們期待的obj,因此會彈出undefined
         , 2000);
    }
};

obj.y();

上面是剛開始遇到的疑問

後來經指點,一段代碼理解問題

jswindow.setTimeout();

解決方法:

...
y.function(){
    var that = this;
    setTimeout(
        function(){
            alert(that.y);  //既然setTimeout指向的是window，咱們把它換了就ok
        }
        ,2000)
}
...

以上代碼摘自: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html