javascript 特性

最新推荐文章于 2024-06-10 17:42:00 发布

angx

最新推荐文章于 2024-06-10 17:42:00 发布

阅读量324

点赞数

分类专栏： html&js&css&flash

html&js&css&flash 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

转载自：http://www.cnblogs.com/Moersing/p/4457481.html

作用域： javascript的作用域称为静态作用域，在定义语法上就能确认了，而不是运行时。

 if (true) 
{
  var i = 'moersing' 
} 
console.log(i); //可以访问。

与C#，vb，java等语言不同，javascript没有所谓块级作用域概念，准确的说，就花括号之内定义的变量可以被外面访问到，但是，函数除外，因为函数本身是一个作用域。

另一个例子：

var s= 'moersing'; 
var f= function () { 
  console.log(s); //这里输出的是undefined
  var  s='lingfo';
}
f();

解释下为什么会这样，原因是javascript作用域搜索的问题，在调用函数f的时候，f作用域(函数都有一个局部作用域)，会初始化所有局部变量(只是初始化),于是，console.log()函数访问s的时候，s并没有被赋值，也就相当于 var s而已，所以输出undefind。

闭包特性：

function f ()
{
   var count=0;
   var get =function(){
       count ++;
       return count;
    }
return get;
} 
var  getCount = f();
console.log(getCount()); //1
console.log(getCount());//2

通常，在不使用闭包的情况下，让一个变量递增的办法就是在外层定义一个变量，然后调用方法让其自增。

但是这样做的不好之处在于，别的地方也能访问这个变量，有时会很糟糕。

上面的例子就是一个闭包，在函数f执行完毕之后，返回一个get函数，这时候你可能会认为这个函数里面的count变量已经被销毁，

因为f已经超出作用域了，但实际上不是这样，在返回的get函数中，仍让保留着f的活动对象，当然也包括在其中定义的count变量，

所以，每一次调用get这个函数的时候，应用的都是count这个变量，也就实现了内部自增，除非通过f函数，否则无法访问这个count。

有些网友时常问，我想根据点击的按钮的位置(下标)来执行相应的操作，但是最后总是无法获取到下标，那是因为，在for循环中绑定的下标是是会变化的，当for循环执行完成后，下标的值总是等于 i+1。如：

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

var allDiv = document.querySelectorAll('div');
for(var i=0;i<allDiv.length;i++)
{
    allDiv[i].οnclick=function(){
     alert(this.nodeName+i);
    }
}
在这里，无论单击那个DIV，都会返回  DIV9，原因是，for循环最后一次++是等于9，而9 < allDiv.length =false，所以，循环退出，但是在每个div里面绑定事件是显示i的值，所以一直都是9.

利用javascript提供的闭包特性可以解决这个问题。

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

var allDiv = document.querySelectorAll('div');
for(var i=0;i<allDiv.length;i++)
{
   (function(i){
        allDiv[i].onclick=function(){
        alert(this.nodeName+i);
    }
    })(i);
}

对于闭包特性，通俗来讲，就是嵌套的函数包含了父函数的作用域和本身的作用，这个新的作用域称为闭包特性，但是要记住，当父函数返回之后，作用域就被销毁，但是其活动对象还是会保留在嵌套的函数之中。

另外一个就是:慎用闭包，特别是在操作有关DOM处理的时候，如果一不小心，会造成内存泄露。

this对象：

var  m = {
name:'moersing',
func:function(console.log(this.name))
} 
var t = {
name:'linfo',
}
m.func(); // moersing
t.func= m.func;
t.func();//linfo;

在m的func函数中，引用了this(上下文对象)即被调用的函数所处的环境(作用域)，而下面的t.func指向了m.func，那么，实际上就相当于 t.func={console.log(this.name)}，接下来就浅显易懂了，调用t的func，那么，this这个上下文对象就相当于t，那么也就是t.name。所以结果输出了linfo。

call和apply：

call和apply的执行机制是一样的，他可以设置函数的执行环境，也就是说可以改变一个函数所处的位置(非物理)，别忘了，函数的上下文对象(this)也是根据函数所处的位置变换的。

首先，看看call：

 var m = {
    name:'moersing',
    age:18,
    print:function(){  console.log(this.name+this.age)  }
}
   var t = {name:'linfo',age:20}
 m.print.call(t); //info 20

这里，在运行时，将print函数的执行环境改变成了t(call函数第一个参数是一个对象，就是上下文对象)，那么，this.name

就相当于 t.name，同理，age也是一样的。

apply与call一样，只不过他可以传递数组 fun.call(obj,[1,2,3,........]);

__proto__和prototype和constructor:

__proto__：指向对象的原型。
prototype:指向了构造函数的原型对象。
constructor：对象(包括原型)有一个constructor属性，这个属性指向了其所在的函数。

注：对象和实例是相同的概念。

也就是说，prototype和constructor是间接互相引用的。

值得区分的就是 __proto__和prototype：

这两个对于有经验的人也许会有点困惑，__proto__是存在于实例与构造函数之间的，而prototype是存在于构造函数和原型之间的。

这也就是为什么，构造函数有prototype和__proto__，而实例只有__proto__。别忘了，构造函数也是对象。

很多人误认为，构造函数的__proto__和prototype是指向相同的原型，实际上不是的,看一个例子：

 function c (){ }; 
 alert(c.__proto__); // function empty()
 alert(c.prototype); // c 
从上面可以看出两者之间的不同。 
 var cc= new c();
 alert(cc.__proto__==c.prototype); //true

如果使用c作为构造函数，那么cc实例的__proto__就和c.prototype一致了。

下面是一些例子：

console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype)  // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype)  // true
console.log(err.__proto__ === Error.prototype)  // true

从上面可以看出，对象实例的__proto__都指向了构造该对象的原型对象。

例如： Object 构造了obj (var o={}) 那么这个对象的__proto__就指向了 Object.prototype。

另外，Object.prototype是最高层的原型，根据原型链搜索的概念任何对象 instanceof Object 都是true。

总结：对于__proto__和prototype的概念，千万要记住的就是，两者之间没有可比性，一个是存在于实例和原型之间，一个是存在于构造函数和原型之间。

本人纯属菜鸟，如果有什么不对的地方，还请指正，原创文章，转载请注明地址。QQ：1261870167