1. javascript基础
- NaN和NaN不相等
{}和{}也不相等
在通过parseInt(‘abc23’) -> NaN等转换时会出现NaN,parseInt(‘123ad’) -> 123
判断是不是NaN通过isNaN()函数
typeof(NaN) -> number
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
无标题文档
</title>
<script>
var a=parseInt('abc');
var b=parseInt('def');
alert(a==b);
//NaN和NaN不相等
</script>
</meta>
</head>
<body>
</body>
</html>
- 对象没有length属性
var json={a: 12, d: 5, c: 7};
var arr=[12, 5, 7];
let arr2 = Object.values(42)
console.log(arr2)
/*
alert(json['a']);
alert(arr[0]);
*/
// alert(json.length); undefined
- 真假
//真:true、非零数字、非空字符串、空对象
//假:false、数字零、空字符串、undefined
2. JS面向对象高级
- 继承(深入理解)
B.prototype = A.prototype;
B.prototype = new A();
上面这两者是有区别的,两者都是引用赋值,但是第一种A.prototype赋值给B.prototype后,对B.prototype的修改也会影响到A.prototype. 而第二种则对B.prototype的修改不会影响到A.prototype,不信请debug下面的代码!!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
无标题文档
</title>
<script>
function A()
{
this.abc=12;
}
A.prototype.show=function ()
{
alert(this.abc);
};
//继承A
function B()
{
//this->new B()
A.call(this);
}
// console.log(typeof(A.prototype))
// B.prototype=A.prototype;
B.prototype = new A()
console.log('new A', new A())
console.log('bb', B.prototype)
console.log('aa', A.prototype)
B.prototype.fn=function ()
{
alert('abc');
};
A.prototype.ccc = 'ccc'
// console.log('bb',B.prototype)
// console.log('aa',A.prototype)
var objB=new B();
var objA=new A();
// console.log(typeof objA)
// console.log(objA.__proto__)
objA.fn();
</script>
</meta>
</head>
<body>
</body>
</html>
下面这是值赋值,就不会出现上面那种情况
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
无标题文档
</title>
<script>
function A()
{
this.abc=12;
}
A.prototype.show=function ()
{
alert(this.abc);
};
//继承A
function B()
{
//this->new B()
A.call(this);
}
//B.prototype=A.prototype;
for(var i in A.prototype)
{
B.prototype[i]=A.prototype[i];
}
B.prototype.fn=function ()
{
alert('abc');
};
var objB=new B();
var objA=new A();
objA.fn();
</script>
</meta>
</head>
<body>
</body>
</html>
- 拖拽
事件的兼容性写法:var oEvent = ev || event;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
完整demo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute;}
</style>
<script>
var oDiv=null;
var disX=0;
var disY=0;
window.onload=function ()
{
oDiv=document.getElementById('div1');
oDiv.onmousedown=fnDown;
};
function fnDown(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=fnMove;
document.onmouseup=fnUp;
}
function fnMove(ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
}
function fnUp()
{
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
通过继承实现拖拽功能
Drag.js
function Drag(id)
{
var _this=this;
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById(id);
this.oDiv.onmousedown=function (ev)
{
_this.fnDown(ev);
return false;
};
};
Drag.prototype.fnDown=function (ev)
{
var _this=this;
var oEvent=ev||event;
this.disX=oEvent.clientX-this.oDiv.offsetLeft;
this.disY=oEvent.clientY-this.oDiv.offsetTop;
document.onmousemove=function (ev)
{
_this.fnMove(ev);
};
document.onmouseup=function ()
{
_this.fnUp();
};
};
Drag.prototype.fnMove=function (ev)
{
var oEvent=ev||event;
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';
};
Drag.prototype.fnUp=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
LimitDrag.js
function LimitDrag(id)
{
Drag.call(this, id); //继承属性
}
for(var i in Drag.prototype)
{
LimitDrag.prototype[i]=Drag.prototype[i];
}
LimitDrag.prototype.fnMove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-this.disX;
var t=oEvent.clientY-this.disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
this.oDiv.style.left=l+'px';
this.oDiv.style.top=t+'px';
};
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:yellow; position:absolute;}
#div2 {width:200px; height:200px; background:green; position:absolute;}
</style>
<script src="Drag.js"></script>
<script src="LimitDrag.js"></script>
<script>
window.onload=function ()
{
new Drag('div1');
new LimitDrag('div2');
};
</script>
</head>
<body>
<div id="div1">普通拖拽</div>
<div id="div2">限制范围</div>
</body>
</html>