网站地图    收藏   

子栏目

主页 > 前端 > javascript >

javascript入门教程之学习笔记

来源：自学PHP网    时间：2014-09-19 14:48 作者： 阅读:次

[导读] 变量在js中需要利用var进行定义，没有定义的变量会是一个undefine类型的数据了，这个很多朋友看成错误，其实也是js变量的一种类型了，下面我们一起来看看js变量。...


呵呵,,好久没写文章了,,近来接触js比较多久顺便写个与js相关的文吧。

嗯，今天就谢谢与变量相关的东东吧，变量这东西只要你是敲代码的天天都得接触呢。

有人说变量有啥好写的？我不会告诉你Javascript里的变量很奇怪呢，没好好学一遍真的会被搞晕掉的。

好，先拿一篇已存的文，个人感觉写的还可以。

1.变量类型：基本类型和引用类型

    在js 中，基本类型:Number,Boolen,null,String,Underfined 存放在栈内存中，数据长度是固定的。
    而引用类型，Object存在堆内存中，数据长度是变化的（同时有栈内存中有一个指针指向这个Object的）。

2.引用类型的Object能任意指定新的成员，但是对于基本类型就是无效。
 

 代码如下 复制代码
   var str=’ahui’;
    str.name=’xiaoming’;//无效。
    alert(str.name);//undefined

3.关于复制
    基本类型：在新的栈内存中生成一个副本

     

 代码如下 复制代码
   var a='stra',b;
        
        b=a;//这里会所b数据拷贝到a所在的栈内存中
        
        b='strb';//a='stra'


引用类型：在新的栈内存中存一个相同的指针
    也就是说：其赋值不会开辟新内存空间。两个变量会保存完全相同的数据。

 代码如下 复制代码


        var objA=new Object();
        objA.name='stra';
        var objB=objA;//objB在栈内存的指针和objA在栈内存中的指针是值是相同的——指向同一个堆块
        objB.name='strb';
        alert(objA.name);//strb
        alert(objB.name);//strb


4.传参数——js中所有的参数都是按值传送的，而不是按引用。
    （这一点等同于复制）
    注：按值传递并不意味着你所传参数不会因为函数的执行而受影响。如果参数本身是引用类型，那么所复制的参数本身也包含相同的指针，参数的改变当然会影响到所传的变量。

 代码如下 复制代码


    var o=new Object;
    o.name='ahui';
    function func(obj){
    obj.name='This variable is changed';
    }
    func(o);
    alert(o.name);//This varibale is changed


变量的作用域

出处为javaeye的某贴——这世界就是这样，有些人喜欢制造问题，有人喜欢解决问题。制造问题的人为解决问题的人带来就业机会……

 代码如下 复制代码

<script type="text/javascript"> 
var a=100; 
var b=true; 
function test(){ 
    alert(a); 
    alert(b); 
    b=false; 
    alert(b); 
    var a=200; 
    alert(a/2); 
    alert(++Math.PI); 
    alert(Math.PI++); 
} 
test();
</script>

什么第一个alert为undefined，而第二个为true。这问题也可以延伸为——alert(b)时怎么就会找外部的b,而alert(a)时就不会往外面找?!

我们都明白局部变量的优先级大于全局变量，或者说内围作用域的变量的优先级比外围的高。当JS引擎在当前作用域找不到此变量时，它就往外围的作用域找。不过，在这之前，有一个严肃的问题是，究竟当前作用域存不存在这个变量。像javascript这样的解释型语言，基本分为两个阶段，编译期（下面为符合大多数语言的称呼习惯，改叫预编译）与运行期。在预编译阶段，它是用函数来划分作用域，然后逐层为其以 var 声明的变量（下略称为var变量）与函数定义开辟内存空间，再然后对var变量进行特殊处理，统统赋初始值为undefined，如下图：

我们便可以推知，当前网页拥有两个a，一个b，一个test函数。如果在运行期用到除此以外的东东，如c函数或d变量啦，就会报未定义错误（用eval等非正常手段生成变量与函数的情况除外），此外，它们最多出现未赋值警告。

javascript的运行期是在为var变量与函数定义分配空间后立即执行，并且是逐行往下执行的。

    第1行它为外围作用域的a赋值为100
    第2行它为外围作用域的b赋值为true
    第3行进行test的作用域，我们简称为内围作用域。
    第4行就立即调用内围作用域的a，这时它还没有来得及赋值呢！不过它已经声明过了，因此默认为其赋值为undefined（在预编译阶段，见图），于是alert为undefined
    第5行就调用b时，JS引擎就拿起我画的图看了（笑），发现test的作用域内没有b，眼睛往外望，发现b了，而b在第二行就赋值为true，于是alert为true。
    第6行为一个赋值操作，把外围的b变量改赋为false。于是到第7行时，alert为false。以下说法不说了。

作为对比，我们改写一下例子：

 代码如下 复制代码
var a=100;
var b=true;
function test(){
    alert(a);
    alert(b);
    var b=false;
    alert(b);
    var a=200;
    alert(a/2);
    alert(++Math.PI);
    alert(Math.PI++);
}
test();

这时在test函数的作用域内，b也被声明了。

掌握预编译为var变量与函数定义分配空间这一事实后，许多问题就迎刃而解。我们看犀牛书上的一个例子。

 代码如下 复制代码
var scope = "global";
function f() {
    alert(scope);            
    var scope = "local";     
    alert(scope);            
}
f();

答案呼之欲出！

我们来看更复杂的例子。

 代码如下 复制代码
Object.prototype.test = 'wrong';
var test = 'right';
(function f() {
    alert(test);
})();

这个问题的难点在于，运行期时，又生成一同名变量，它是附着于Object.prototype，究竟哪一个距离F()的作用域近一些呢?!测试结果是var test。于是我们有了下图：

于是我们明白了，原来定义在函数外面的var变量并不位于window作用域的下一层。

我们继续加深难度。

 代码如下 复制代码
(function f() {
    alert(test);
})();
Object.prototype.test = 'ccc';
Object.test = "bbb"
window.test = "aaa";

报未定义错误，因为预编译期时没有符合要求的var变量，而在运行期时，和它同名的变量在调用时（第2行）也尚未建立起来！

如果这样呢？！

 代码如下 复制代码

Object.test = "bbb";
Object.prototype.test = 'ccc';
window.test = "aaa";
(function f() {
    alert(test);
})();

估计有很多人猜是bbb，其实是ccc!有人就不解了，不是对象的属性的优先级比其原型属性的优先级高吗？？？

无错，的确如此，不过对象的属性是这样定义的：

 代码如下 复制代码

var o = {test:"eee"}

Object.test = “XXX”

这样定义，为类属性，或称静态属性。类属性优先级都是比实例属性低的

通过这图也教育我们，一定要用局部变量啊，要不，一层层往上爬，效率是多么低啊。另外，这图也告诉我们，window是一个多么高级的存在啊（微软最爱听），Object都比它低一等，更别提什么继承问题啦！（在FF与IE中）

//颠覆常识的存在

 代码如下 复制代码

alert(window instanceof Object);
<script type="text/javascript"> //颠覆常识的存在 alert(window instanceof Object); </script>

 

搞定这个我们看最难的一题。类属性，实例属性，原型属性，极晚绑定的属性都考到了！不过实例属性与类属性已超出本文的讨论范围，恕不讨论了。这些也不太难，很容易google到的，自己google吧。

 代码如下 复制代码
function foo(){
  foo.abc = function(){alert('def')}
  this.abc = function(){alert('xyz')}
  abc = function(){alert('@@@@@')};
  var abc = function(){alert('$$$$$$')}
}
foo.prototype.abc = function(){alert('456');}
foo.abc = function(){alert('123');}
var f = new foo();
f.abc();
foo.abc();
abc();

蓝色理想的人说这题出得不好，有错。我说，有错才好，这样才能考出水平！十秒内做出正确答案，说明学会了。

答案：
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <p>

第一个为xyz,f.abc很明显就是调用其实例属性，通常构造函数是这样定义实例方法与实例属性的：</p> <blockquote>this.XXX = "XXXXXXXX"</blockquote> <p>第二个就是构造函数内部的foo.abc还是外部的foo.abc的问题了。我们只要搞清楚一点就可以，写在外面的那个是极晚绑定的成员，优先级极低，覆盖不了内部的同名成员。</p> <p>第三个为什么会报错呢？！因为在预编译阶段，foo()的作用域就有了一个abc变量， 因此abc = function(){alert('@@@@@')}就变不了window.abc = function(){alert('@@@@@')}，而下面那一行就更甭提了。 而我们调用的是abc,全局变量的abc,浏览器会自动给它加上window.abc，就算不加上，沿途的Objcet也没有abc这个变量，因此它在f()的作用域外找不到abc，就报未定义错误！</p>

最后归纳一下，JS引擎有两个设置变量的机会。第一次在预编译时期，所有var变量会分配到各自的作用域中，值一律为undefined。第二次在运行期，由于是逐行执行，因此是可变的。我们可以通过eval与Function动态生成新的变量，它们的作用域都是可制定的，其他赋值语句，只是把变量固定于顶层作用域（window）中，或是仅仅是重新赋值。我们也可以用delete来删除对象的属性，迫使其往外走同名变量。with闭包会在其引用的对象的属性被删除后，在闭包的外围寻找与此属性同名的变量


我来做个总结吧，js里如果操作的是基本变量那么你可以按照你想的那样去做，如果是引用类型，那么你一定要好好想想，这是不是你想要的结果，切记！！！

 

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论