JavaScript魅力总结(11-12)

最新推荐文章于 2023-01-31 05:45:09 发布

. . . . .

最新推荐文章于 2023-01-31 05:45:09 发布

阅读量182

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/89413406

版权

前端开发专栏收录该内容

351 篇文章 19 订阅

订阅专栏

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>

. . . . .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript魅力总结(11-12)

javascript基础NaN和NaN不相等{}和{}也不相等在通过parseInt(‘abc23’) -> NaN等转换时会出现NaN，parseInt(‘123ad’) -> 123判断是不是NaN通过isNaN()函数typeof(NaN) -> number<!DOCTYPE HTML><html> <head&g...
复制链接

扫一扫