js程序设计02——变量、作用域问题

首先,ECMAScript中的数据类型分为基本类型、引用类型,基本类型的访问操作是按值的。引用类型的值是保存在内存中的对象,操作对象时,实际上操作的是对象的引用,而非对象自身。“javascript高级程序设计”中的描述是“当复制保存着对象的某个变量时,操作的是对象的引用。但在为对象添加属性时,操作的是实际的对象”,下面从数据复制来看下:

var num1 = 12;
var num2 = num1;
num2 = 13;
console.log(num1);//12
console.log(num2);//13

var obj = new Object({
  "name":"admin1"
});
var obj2 = obj;
obj2.name = "test";
console.log(obj.name);

基本类型的值进行复制时,复制的仅仅是内存中的值,变量的地址是在内存中重新开辟的空间,所以这里对num2重新赋值后num1并没有改变;

引用类型进行复制时,变的是将新值的引用指向原有的值,这样一来,新值和旧值便指向了同一内存区域,两个变量实际上将引用同一个对象,因此这里对obj2的操作会影响到obj对象。

来看如下一个参数传递的实例:

function say(num){
  ++num;
  return num;
}
var count = 1;
var num2 = say(count);
console.log(count);    //1
console.log(num2);    //2

var o = {"name":"修改前的值"};
function say2(obj){
  obj.name = "修改后的值";
}
say2(o);
console.log(o.name);    //"修改后的值"

参数传递时:基本类型传递的是值,引用类型也是按值传递的,从上述例子并不能看出来obj传递时是按值传递还是引用传递,因为即使是按值传递,obj也会按引用来访问同一个对象。还有一个demo:

function setName(obj){
  obj.name = "admin";
  obj = new Object();
  obj.name = "test";
}
var obj = new Object({
  "name":"hahaha"
});

setName(obj);
console.log(obj.name);      //"admin"

如果Object是按引用传递的,那么Object就会自动被修改为指向其name 属性值为"test"的新对象。但是,当接下来再访问object.name 时,显示的值仍然是"admin"。这说明即使在函数内部修改了参数(对象)的值,但原始的引用仍然保持未变。实际上,当在函数内部重写obj 时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

关于instanceof:

var obj = new Object();

console.log(obj instanceof Object);   //true
console.log(12 instanceof Object);    //false

instanceof相比于typeof,前者是检测引用类型是否是某类型的实例,仅适用于引用类型,对所有的基本类型调用instanceof直接返回false,所有的引用类型均是Object的实例。引用类型包括:Object、Array、Date、RegExp、Function、基本包装类型等。

关于函数环境及作用域问题:

先看一个例子:

function buildUri(){
  var qs = "?debug=true";
  with(location){
    var url = href + qs;
  }
  return url;
}

console.log(buildUri());    //"http://null.jsbin.com/runner?debug=true"

首先js没有块级作用域概念,使用with语句后,在其内部定义的url变量便成了外部函数作用域内的变量,内部的href会在location作用域中查找,即location.href,所以可以直接作为返回值返回。同样的还有if语句、for循环中声明的变量:

if (true){
  var url = "http://www.baidu.com";
}

console.log(url);       //"http://www.baidu.com"
for(var i = 0; i < 10; i++){
  
}

console.log(i);  //"10"

再来看下js Array的toString()、toLocaleString()的区别:

var p1 = {
  toLocaleString:function(){
    return "p1_1";
  },
  toString:function(){
    return "p1_2";
  }
}

var p2 = {
  toLocaleString:function(){
    return "p2_1";
  },
  toString:function(){
    return "p2_2";
  }
}

var ps = [p1,p2];
console.log(ps);  //"p1_2,p2_2"
console.log(ps.toString());  //"p1_2,p2_2"
console.log(ps.toLocaleString());  //"p1_1,p2_1"

js的Array操作的基本方法(var colors = new Array();):

  • 添加:colors.push("xxx")
  • 移除:colors.pop()   // colors.length = colors.length - 1
  • 取index为0的数据:colors.shift("xxx")
  • 从开始依次插入:colors.unshift("xxx")
  • 排序:sort()、reverse()
  • 拼接:concat()
  • 截取:splice()
  • 位置查找:indexOf()、lastIndexOf()
  • 迭代:filter(返回该函数会返回true 的项组成的数组)、forEach(没有返回值)、map(返回每次函数调用的结果组成的数组)
  • 归并:reduce()、reduceRight()

 首先是几个例子:

var arr = new Array();
arr.unshift("1","2");
console.log(arr);   //["1", "2"]
arr.unshift("4");
console.log(arr);   //["4", "1", "2"]

其次是sort函数,sort默认会将数组的每一项直接先转换为string类型,然后再以string类型比较每一项内容再进行排序,所以如下数据正确:

var values = [0, 1, 5, 10, 15];
values.sort();  //默认是转换为string比较
console.log(values);  //[0, 1, 10, 15, 5]

sort接收一个比较函数作为参数来自定义比较方式:

//自定义的比较函数
function compare(a,b){
  if (a > b){
    return 1;
  }else if(a < b){
    return -1;
  }else{
    return 0;
  }
}

values.sort(compare);
console.log(values);   //[0, 1, 5, 10, 15]

使用splice实现数组的添加、删除、替换:

var arr1 = ["1","2","3","4"];
arr1.splice(0,1);   //删除0位置开始的1个元素
console.log(arr1);  //["2", "3", "4"]

arr1.splice(0,0,"我是插入的");
console.log(arr1);   //["我是插入的", "2", "3", "4"]

arr1.splice(0,1,"我是替换的");
console.log(arr1);   //["我是替换的", "2", "3", "4"]

使用concat实现数组拼接:

var arr1 = new Array(1,2,3,4,5);
var arr2 = arr1.concat(7,8);
console.log(arr2);   //[1, 2, 3, 4, 5, 7, 8]
var arr3 = arr1.concat(9,["admin","test"]);
console.log(arr3);   //[1, 2, 3, 4, 5, 9, "admin", "test"]

迭代的基本使用:

var arr1 = new Array(1,2,3,4,5);
var arr2 = arr1.filter(function(item,index,array){
  return item > 3;
});
console.log(arr2);   //对每一项进行>3判断,返回[4, 5]

var arr3 = arr1.map(function(item,index,array){
  return item * 2;
});
console.log(arr3);  //对每一项进行*2运算,返回结果:[2, 4, 6, 8, 10]

var arr4 = arr1.forEach(function(item,index,array){
  console.log(item * 2);
});

数组归并的使用:

var arr1 = new Array(1,2,3,4,5);
var arr2 = arr1.reduce(function(prev,cur,index,array){
  console.log("prev:"+prev);
  console.log("cur:"+cur);
  return prev + cur;
});
console.log("arr2:"+arr2);      //15

可以看出,reduce执行时,cur默认是从数组第二项开始遍历,这时prev为index=0的值,每一次操作后return的值作为下一次遍历的prev值,知道遍历结束整个数组,reduceRight则以相反顺序进行遍历。

这里有一个很奇怪的地方,如下:

如果array长度为1时,使用第一种方式直接报错,第二种方式确是ok的,甚是不解啊,坑爹的js。按理说直接采用对象字面量的方式创建数组内存消耗小点,速度优于new Array方式,一般情况下,建议使用字面量形式。

关于函数声明

可以将函数名想像为一个指针,这样一来,后声明的同名函数会覆盖之前的函数,这也是js中函数没有重载的原因。js运行时,会优先将所有的函数声明提取出来放入当前的执行环境当中,函数被调用时再从执行环境中抽取调用,所以如下调用是正常的:

console.log(say());  //"hello merry"

function say(){
  return "hello merry";
}

但是如下写法是错误的:

console.log(s());  //"TypeError: s is not a function"

var s = function say(){
  return "hello merry";
}

函数中返回一个函数

函数可以作为参数进行传递,也可以作为返回值直接返回,前面有记录数组的sort方法,该方法可以自定义一个排序规则,直接传入一个比较函数即可,比较函数包含数组中的两个值,下面改写一下该方法,以实现针对对象数组某个属性进行排序:

function compareFromAttr(attr){
  return function(obj1,obj2){
    var value1 = obj1[attr];
    var value2 = obj2[attr];
    if(value1 > value2){
      return 1;
    }else if(value1 < value2){
      return -1;
    }else {
      return 0;
    }
  }
}

var arrs = [{"name":"admin","age":23},{"name":"test","age":21}];
arrs.sort(compareFromAttr("age"));
console.log(arrs);
arrs.sort(compareFromAttr("name"));
console.log(arrs);

关于函数内部属性

函数内有2个特殊对象,一个是arguments,一个是this。arguments用来保存参数数组,this指的是当前函数执行绑定的执行环境。arguments有一个特殊属性叫做callee,该属性是一个指针,指向拥有该arguments对象的函数,也就是说arguments属于哪个函数,那么arguments.callee()就代表哪个函数,即可以使用arguments.callee()替代该函数执行,在递归函数里面可以这样使用,这样一来修改函数名称后不需再修改内部函数名:

function factorial(num){
  if(num <= 1){
    return num;
  }else{
    return num * arguments.callee(num - 1);
  }
}

console.log(factorial(3));  //6

ECMAScript 3后添加了一个属性:caller,caller属性保存了调用当前函数的函数的引用,如果在全局函数中调用该函数,返回null:

function outer(){
  inner();
}
function inner(){
  alert(arguments.callee);
  alert(arguments.callee.caller);
}
outer();

因为outer调用了inner,所以在inner中使用caller属性,直接返回的是outer函数的引用,全局的话直接返回null:

function inner(){
  console.log(arguments.callee.caller);
}
inner();  //"null"

关于函数属性及方法(call、apply、length等)

函数属性length表示函数的命名参数个数,call、apply用于指定函数中this的值:

function call(name){
  console.log("call is called:"+name);
}

function call1(){
  call.apply(this,["hahah"]);   //传入对象数组
}

function call2(name){
  call.apply(this,arguments);  //传入arguments对象
}

call1();   //"call is called:hahah"
call2("hahah");   //"call is called:hahah"


console.log(call.length); //1
console.log(call1.length);  //0
console.log(call2.length);  //1

call和apply的区别在于:两个方法第一个参数均是指定this作用域,不同的是参数部分:apply可以使用arguments或者参数数组形式,call使用的是挨个罗列的方式。

使用call or apply来改变函数作用域:

var color = "red";
var o = {"color":"blue"};

function sayColor(){
  console.log(this.color);
}

sayColor();  //"red"
sayColor.call(this);  //"red"
sayColor.call(window);   //"red"
sayColor.call(o);  //"blue"

ECMAScript 5中新增了一个bind方法:bind创建一个函数实例,然后将其内部的this值绑定到bind的参数上:

var color = "red";
var o = {"color":"blue"};

function sayColor(){
  console.log(this.color);
}
var say = sayColor.bind(o);
say();  //"blue"

每个函数继承的toLocaleString()和toString()方法始终都返回函数的代码:

function sayColor(){
  console.log(this.color);
}

/*"function sayColor(){
  window.runnerWindow.proxyConsole.log(this.color);
}"*/
console.log(sayColor.toString());
console.log(sayColor.toLocaleString());

关于基本包装类型

Boolean、String、Number类型,既具有基本类型的行为又具有引用类型的属性:

var s = new String("adminteatawmdnaw");
var s1 = "adminteatawmdnaw";
console.log(s instanceof String);  //true
console.log(s1 instanceof String);  //false
console.log(typeof s);   //"object"
console.log(typeof s1);  //"string"

var n = new Number(12);
var n1 = 12;
console.log(n instanceof Number);  //true
console.log(n1 instanceof Number);  //false
console.log(typeof n);  //"object"
console.log(typeof n1);  //"number"

var b = new Boolean(true);
var b1 = false;
console.log(b instanceof Boolean);  //true
console.log(b1 instanceof Boolean);  //false
console.log(typeof b);   //"object"
console.log(typeof b1);   //"boolean"

关于encodeURI、encodeURIComponent区别

作用范围:encodeURI适用整个uri,而encodeURIComponent适用于uri中的某一段

编码范围:encodeURI不会对本身属于uri的特殊字符进行编码,例如冒号、正斜杠、井号、问号等,而encodeURIComponent会对任何非标准字符进行编码。

var uri = "http://www.wrox.com/illegal value.htm#start";
console.log(encodeURI(uri));//"http://www.wrox.com/illegal%20value.htm#start"
console.log(encodeURIComponent(uri));//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"

实际使用时,后者使用居多,因为一般都是给uri尾部附上的请求参数进行编码,对应地,解码使用decodeURI、decodeURIComponent。

关于eval

eval()是js一个很变态的函数,属于Global对象,eval()执行时会将eval()中的参数当做实际ECMAScript语句来执行,所以一下写法是正确的(严格模式下会报错):

eval("function say(){console.log('hello Mr.Chao')}");
say();  //"hello Mr.Chao"
eval("var msg = 'how do you known my name?'");
console.log(msg);  //"how do you known my name?"

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏恰同学骚年

C#委托与事件学习笔记

      今天跟随视频学习了一下C#中最重要的一些概念之委托与事件。老杨的视频讲的还是挺深入浅出,不过刚接触C#.NET的人还是朦朦胧胧,就像张子阳先生说的“...

763
来自专栏码神联盟

珍藏 | Java 岗位 100道 面试题及答案详解

1864
来自专栏技巅

Glusterfs之rpc模块源码分析(中)之Glusterfs的rpc模块实现(3)

1494
来自专栏yang0range

Java的面试基础题(二)

1)特点:存储对象;长度可变;存储对象的类型可不同 2)Collection (1)List:有序的;元素可重复,有索引 (add(index, elem...

782
来自专栏Java Edge

Java对象序列化底层原理源码解析WhatHowWhyOther

4866
来自专栏coder修行路

Django进阶之中间件

 中间件简介 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的...

1968
来自专栏老马说编程

(84) 反射 / 计算机程序的思维逻辑

上节介绍完了并发,从本节开始,我们来探讨Java中的一些动态特性,包括反射、类加载器、注解和动态代理等。利用这些特性,可以以优雅的方式实现一些灵活和通用的功能,...

2098
来自专栏邹立巍的专栏

Linux 的进程间通信:消息队列

Linux 环境提供了 XSI 和 POSIX 两套消息队列,本文将帮助您掌握以下内容:如何使用 XSI 消息队列,如何使用 POSIX 消息队列,它们的底层实...

4000
来自专栏大内老A

ASP.NET MVC路由扩展:路由映射

上周我写了三篇文章(一、二、三)详细地介绍了ASP.NET的路由系统。ASP.NET的路由系统旨在通过注册URL模板与物理文件之间的映射进而实现请求地址与文件路...

18110
来自专栏python学习指南

Scala入门学习笔记四--List使用

前言 本篇将介绍一个和Array很相似的集合List,更多内容请参考:Scala教程 本篇知识点概括 List的构造 List与Array的区别 Lis...

1877

扫码关注云+社区