javascript易错点辨析

于 2016-07-19 18:06:42 发布
阅读量710 收藏
点赞数
分类专栏： 前端 javascript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x_chengqq/article/details/51957975
版权

1、jQuery中的$(this)和js中的this的区别

1、js中的this

this永远指向函数运行时所在的对象！而不是函数被创建时所在的对象。this对象是在运行时基于函数的执行环境绑定的，在全局环境中，this等于window。

		var fullname = 'Rose';
		var person = {
			fullname : 'Jack',
			prop:{
				fullname : 'Blizzard',
				getFullname : function(){
					return this.fullname;
				}
			}
		};

		console.log(person.prop.getFullname());//Blizzard
		var test = person.prop.getFullname;
		console.log(test());//Rose

在这个例子中，getFullname被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，所以在这里this指的是window，所以返回的是第一个fullname。

2、jQuery中的$(this)

$()=jquery(),也就是说$()返回的是一个jquery对象。

2、jQuery中的$.fn用法

$.fn 是指jquery的命名空间加上fn上的方法和属性，会对jquery实例每一个有效。

如：$.fn.abc()，即$.fn.abc()是对jquery扩展了一个abc方法，那么后面的每一个jquery实例都可以引用这个方法了。

	jQuery.fn = jQuery.prototype = {
		init: function(selector, context){
			//TODO
		}
	};

这里就可以看出来，jQuery.fn = jQuery.prototype。

3、笔试中的js API考点记录：

1、

	function add(array,temp,index){
		var _array = array.concat();//concat方法用于连接两个或多个数组 <span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">_array =<span> </span></span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">[</span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">0</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">1</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">2</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">3</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">]</span>
		_array.splice(index,0,temp);//splice()方法向/从数组中添加/删除项目，然后返回被删除的项目 
		return _array;//<span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">_array =<span> </span></span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">[</span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">0</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">1</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-string" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">"a"</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">2</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">,<span> </span></span><span class="object-value-number" style="font-family:Consolas, ";font-size:12px;color:#222222;min-width: 0px; min-height: 0px; box-sizing: border-box;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 227, 199);">3</span><span style="font-family:Consolas, ";font-size:12px;color:#222222;Lucida Console", monospace; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: 14.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 227, 199);">]</span>
	}
	console.log(add([0,1,2,3],'a',2));

[0, 1, "a", 2, 3]

2、

	var a = [,2];
	console.log(a.length); //2

3、split与splice

split()方法是String对象原型的方法，用于把一个字符串分割成字符串数组。

splice()方法是Array对象原型的方法，向 / 从数组中添加 / 删除项目，然后返回被删除的项目。会改变原始数组。

4、原型方法和非原型方法的区别：

	var Obj = function(){
		this.name = 'obj';
	}
	Obj.prototype.setName = function(name){
		this.name = name;
	}
	var obj = new Obj();
	obj.setName('cvte');
	console.log(obj.name);//cvte
	delete obj.name;
	console.log(obj.name);//undefined
cvte

undefined

5、关于闭包：

	var myObject = {
		foo: "bar",
		func: function(){
			var self = this;
			console.log(this.foo);
			console.log(self.foo);
			(function(){
				console.log(this.foo);
				console.log(self.foo);
			}());
		}
	};

	myObject.func();
//bar

//bar

//undefined

//bar

6、局部变量与参数传递：

	var bb = 1;
	function aa(bb){
		bb = 2;
		alert(bb);
	};
	aa(bb);  //2
	alert(bb);    //1

	var bb = 1;
	function aa(a){
		bb = 2;
		alert(bb);
	};
	aa(bb);   //2
	alert(bb);    //2

7、关于匿名函数： 
	<ul>
		<li>click me</li>
		<li>click me</li>
		<li>click me</li>
		<li>click me</li>
	</ul>

	var elements = document.getElementsByTagName('li');
	var length = elements.length;
	for(var i = 0; i < length; i ++){
		elements[i].onclick = function(){
			alert(i);
		}
	}

这里依次点击4个li标签，依次弹出4,4,4,4.

解答：这里的事件，绑定的并非是i的值，而是i本身（alert里的i），所以当程序执行完，i的值变为4，去执行onclick事件时，执行alert(i)，自动查找i，值为4，所以依次弹出4.

改正：

	var elements = document.getElementsByTagName('li');
	var length = elements.length;
	var handler = function(i){
		return function(){
			alert(i);
		};
	}
	for(var i = 0; i < length; i ++){
		elements[i].onclick = handler(i);
	}
避免在循环中创建函数，可以在循环之外创建一个辅助函数，让这个辅助函数返回一个绑定了当前i值的函数，避免混淆。

8、$().each()与$.each()

jQuery中遍历对象和数组的两个方法。

$().each在dom处理上面用的较多。如果页面中有多个input标签类型为checkbox，这时可以使用$().each来处理多个checkbox。

$.each()用来遍历一个数组。

x_chengqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值