javascript面向对象习题答案
第二章
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'); 