javascript面向對象習題答案_ZenDei技術網路在線

第二章 1．如果我們在控制臺中執行下列語句，結果分別是什麼？為什麼？ 2．執行下麵的語句後，v 的值會是什麼？ var v = v || 10; 如果將v 分別設置為100、0、null，結果又將是什麼？ 100, 10, 10 3．編寫一個列印乘法口訣表的腳本程式。提示：使用嵌套迴圈來實現。第三 ...

第二章

1．如果我們在控制臺中執行下列語句，結果分別是什麼？為什麼？

var a; typeof a;   undefined
> var s = '1s'; s++;   NaN
> !!"false";   true
> !!undefined;   false
> typeof -Infinity;   number
> 10 % "0";    NaN
> undefined == null;    true
> false === "";     false
> typeof "2E+2";    string
> a = 3e+3; a++;    3000

2．執行下麵的語句後，v 的值會是什麼？

var v = v || 10; 如果將v 分別設置為100、0、null，結果又將是什麼？

100, 10, 10

3．編寫一個列印乘法口訣表的腳本程式。提示：使用嵌套迴圈來實現。

for (let i = 1; i < 10; i++) {
    for (let j = i; j < 10; j++) {
      console.log(i + '*' + j + '= '+ i*j);
    }
  }

第三章

1．編寫一個將十六進位值轉換為顏色的函數，以藍色為例，#0000FF 應被表示成 rgb(0,0,255)的形式。然後將函數命名為getRGB()，並用以下代碼進行測試。提示：可以將字元串視為數組，這個數組的元素為字元。

function getRGB(color) {
  let color1 = color.replace(/#/g, '');
  console.log(color1)
  let a = parseInt(color1.substring(0, 2), 16);
  let b = parseInt(color1.substring(2, 4), 16);
  let c = parseInt(color1.substring(4), 16);
  return 'rgb(' + a + ',' + b + ',' + c + ')';
}

第四章答案

4. 在String()構造函數不存在的情況下自定義一個MyString()的構造器函數。記住，由於String()不存在，因此您在寫構造器函數時不能使用任何屬於內建String對象的方法和屬性。並且要讓您所創建的對象通過以下測試：

var s = new MyString("hello");
s.length;  //5

s[0];  //"h"

s.toString();  //"hello"

s.valueOf();  //"hello"

s.charAt(1);  //"e"

s.charAt("2");  //"l"

s.charAt("e");  //"h"

s.concat(" world!");  //"hello world!"

s.slice(1,3);  //"el"

s.slice(0,-1);  //"hell"

s.split("e");  //["h","llo"]

s.split("l");  //["he","","o"]

answer

function MyString(pstr){
    this.str=pstr.toString();
    this.length=this.str.length;

    for(var i=0;i<this.length;i++){
        this[i]=this.str[i];
    }

    this.toString=function (){
        return this.str;
    };

    this.valueOf=function (){
        return this.toString();
    };
    this.charAt=function(index){
        index=parseInt(index,10);
        index=isNaN(index)?0:index;
        return this[index];
    };
    this.concat=function(concatStr){
        return this.str+concatStr;
    };
    this.slice=function(startIndex,endIndex){
        while(startIndex<0){
            startIndex=startIndex+this.length;
        }
        while(endIndex<0){
            endIndex=endIndex+this.length;
        }
        if(endIndex<=startIndex){
            return "";
        }
        var resultStr="";
        for(var i=startIndex;i<endIndex;i++){
            resultStr+=this[i];
        }
        return resultStr;
    };
    this.split=function(s){
        var resultArr=[];
        var tempStr="";
        for(var i=0;i<this.length;i++){
            if(this[i]===s){
                resultArr.push(tempStr);
                tempStr="";
            }else{
                tempStr+=this[i];
            }
        }
        resultArr.push(tempStr);
        return resultArr;
    };
    this.reverse=function(){
        var tempArr=[];
        var i;
        for(i=0;i<this.length;i++){
            tempArr[i]=this[i];
        }
        tempArr.reverse();
        this.str=tempArr.join("");
        for(i=0;i<this.length;i++){
            this[i]=tempArr[i];
        }
    };
}

6.在Array()構造器以及相關的數組文本標識法都不存在的情況下，自定義一個類似的MyArray()構造器，並令其通過以下測試：

var a = new MyArray(1,2,3,"test");
a.toString();
//"1,2,3,test"

a.length;
//4

a[a.length-1];
//"test"

a.push("boo");
//5

a.toString();
//"1,2,3,test,boo"

a.pop();
//boo

a.toString();
//"1,2,3,test"

a.join(",");
//"1,2,3,test"

a.join(" isn\'t");
//1 isn't 2 isn't 3 isn't test"

answer

function MyArray(){
        this.length=arguments.length;
        for(var i=0;i<this.length;i++){
            this[i]=arguments[i];
        }

        this.toString=function(){
            var resultStr="";
            for(var i=0;i<this.length;i++){
                if(i===this.length-1){
                    resultStr+=this[i].toString();
                }else{
                    resultStr+=this[i].toString()+",";
                }
            }
            return resultStr;
        };
        this.push=function(obj){
            this[this.length]=obj;
            this.length++;
            return this.length;
        };
        this.pop=function(){
            if(this.length===0){
                return null;
            }
            result=this[this.length-1];
            this[this.length-1]=undefined;
            this.length--;
            return result;
        };
        this.join=function(str){
            var resultStr="";
            for(var i=0;i<this.length;i++){
                if(i===this.length-1){
                    resultStr+=this[i].toString();
                }else{
                    resultStr+=this[i].toString()+str;
                }
            }
            return resultStr;
        }
    }

第七章

1．BOM

作為 BOM 的練習來說，我們可以試著寫出許多錯誤的、富有騷擾性的、對用戶非常不友好的代碼，以及所有非常 Web 1.0 的東西。例如晃動的瀏覽器視窗。請試著令瀏覽器彈出一個 200 × 200 的視窗，然後將其大小漸變成 400 × 400，接著將視窗上下左右不停移動，造成地震效果。為了實現這種效果，我們需要 move*()函數，其中需要一次或多次調用 setInterval()，最後可能還需要 setTimeout()及 clearInterval()來令其停止操作。或者我們可以更簡單一些，將當前日期時間通過 document.title 實時顯示在瀏覽器的標題欄中，並像鐘錶一樣每秒鐘更新一次。

var win = window.open('http://www.baidu.com', 'packt', 'width=200,height=200,resizable=yes');
setTimeout(() => win.resizeTo(400, 400), 1000);

2. DOM

2.1 換一種不同的方式來實現 walkDOM()方法，以回調函數參數的形式來代替console.log()硬編碼。

    function walkDOM(n, callback) {
      do {
        callback(n);
        if(n.hasChildNodes()) {
          walkDOM(n.lastChild, callback);
        }
      } while (n = n.previousSibling);
    }

    function callback(n) {
      console.log(n)
    }

    walkDOM(document.documentElement, callback);

2.2 創建一個叫做include()的函數，該函數可以按需將外部腳本引入當前頁面。你可以首先動態創建一個新的<script>標簽，然後設置其 src 屬性，再將它插入到<head>標簽末端。該函數應通過如下測試：

> include('somescript.js');

function include(src) {
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}
include('somescript.js');

3 事件

創建一個叫做myevent的跨瀏覽器事件工具集（或對象集），其中應該包含以下方法。

addListener(element, event_name, callback) —其中的 element參數也可以是一個元素數組。
removeListener(element, event_name, callback)。
getEvent(event)—對於 IE 的早期版本，我們可以通過檢查 window.event 屬性來實現。
getTarget(event)。
stopPropagation(event)。
preventDefault(event)。

其用例如下：

function myCallback(e) {
e = myevent.getEvent(e);
alert(myevent.getTarget(e).href);
myevent.stopPropagation(e);
myevent.preventDefault(e);
}
myevent.addListener(document.links, 'click', myCallback);

執行這段示例代碼應該會使該文檔中所有的鏈接失效，只不過，它們在被單擊時會彈出一個 alert()視窗，以顯示其 href 屬性。創建一個以像素定位的<div>元素，坐標為 x=100 px， y=100 px。然後編寫代碼使<div> 元素能按照以下按鍵 J（左）、 K（右）、 M（下）、 I（上）或對應方向鍵的操作方式在頁面中移動。並且，在編寫過程中可以重用您剛剛實現的事件工具集。

let myevent = {
      addListener(element, event_name, callback) {
        if (element.length > 1) {
          for (let item of element) {
            addEvent(item, event_name, callback);
          }
        } else {
          addEvent(element, event_name, callback);
        }

        function addEvent(element, name, callback) {
          if (element.addEventListener) {
            element.addEventListener(event_name, callback, false);
          } else if (element.attachEvent) {
            element.attachEvent(event_name, callback, false);
          } else {
            element.event_name = callback;
          }
        }
      },
      removeListener(element, event_name, callback) {
        if (element.removeEventListener) {
          element.removeEventListener(event_name, callback, false);
        } else if (element.detachEvent) {
          element.detachEvent(event_name, callback, false);
        }
      },
      getEvent(event) {
        event = event || window.event;
        return event;
      },
      getTarget(event) {
        const target = event.target || event.srcElement;
        return target;
      },
      stopPropagation(event) {
        event.stopPropagation() || (event.cancelBubble = true);
      },
      preventDefault(event) {
        event.preventDefault() || (event.returnValue = false);
      }
    }

    function myCallback(e) {
      e = myevent.getEvent(e);
      alert(myevent.getTarget(e).href);
      myevent.stopPropagation(e);
      myevent.preventDefault(e);
    }

    myevent.addListener(document.links, 'click', myCallback);

4 XMLHttpRequest 對象

創建一個名為ajax的XHR工具集（或對象集），其示例用法如下：

function myCallback(xhr) {
alert(xhr.responseText);
}
ajax.request('somefile.txt', 'get', myCallback);
ajax.request('script.php', 'post', myCallback,
'first=John&last=Smith');

answer

let ajax = {
  request(url, method, callbak, params) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = (function (myxhr) {
      return function() {
        if (myxhr.readyState === 4 && myxhr.status === 200) {
          callbak(myxhr);
        }
      }
    })(xhr);
    xhr.open(method, url, true);
    xhr.send(params || '');
  }
}

function myCallback(xhr) {
  alert(xhr.responseText);
}
ajax.request('somefile.txt', 'get', myCallback);
ajax.request('script.php', 'post', myCallback, 'first=John&last=Smith');