JavaScript相关概念

mtain 2016年08月19日 232次浏览

JavaScript相关概念

闭包

**闭包:**是指有权访问另外一个函数作用域中的变量的函数.JavaScript创建闭包的常见方式就是在一个函数内部创建另外一个函数.

JavaScript的闭包类似于Java类中使用get/set方法操作类的私有变量,JavaScript闭包是函数的嵌套,内部的函数可以操作上一层的变量属性,同时此函数可以被外部所调用.

在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,这样我们可以很大程度上减少全局作用域中的变量,净化全局作用域。闭包是一种设计原则,它通过分析上下文,来简化用户的调用,让用户在不知晓的情况下,达到他的目的。使用闭包有好处,也有坏处,滥用闭包会造成内存的大量消耗。

代码示例

代码1:
function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);

代码2:
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();
// 计数器为 3

代码3:
var App = function() {
    var isRTL = false;
    var isIE8 = false;
    var isIE9 = false;
    var isIE10 = false;
    return {
        init: function() {},
        initAjax: function() {}
    }
}();

jQuery(document).ready(function() {
   App.init(); // init
});

apply()方法和call()方法

  1. 每个函数都包含两个非继承而来的方法:apply()和call()。
  2. 它们的用途相同,都是在特定的作用域中调用函数。
  3. 接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。

代码示例
代码1:

function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30

代码2:

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
  console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //或 .call(this);
HelloName.call(myObject);

运行结果为:
Hello diz song glad to meet you!
Hello my Object glad to meet you!

从示例中可以看出apply()和call()能够==扩充函数赖以运行的作用域==

方法的覆盖和重写

JavaScript中没有方法的重载这种概念,只有覆盖,不管方法的参数个数多少,同名的最后一个方法会将前面的方法覆盖掉.

<script type="text/javascript">
function sayHello() {
    console.log("Hello----1");
}
function sayHello() {
    console.log("Hello----2");
}
function sayHello() {
    console.log("Hello----3");
}
sayHello();
</script>

如果要实现重载,可采用此种方法

<script type="text/javascript">
function sayHi() {
    if (arguments.length==1) {
        console.log(arguments[0] + "sayHi---1");
    } else if (arguments.length == 2) {
        console.log(arguments[0] + "," + arguments[1] + "sayHi---2");
    } else if (arguments.length == 3) {
        console.log(arguments[0] + "," + arguments[1]+","+arguments[2] + "sayHi---3");
    }
}
sayHi("Tom");
sayHi("Tom", "lucy");
sayHi("Tom","lucy","jame");
</script>

回调函数

回调函数示例

<script language="javascript" type="text/javascript">
// 2.传入要回调的方法名
function main(callBack) {
    console.log("I am main function");
    console.log("Invoke callback function..");
    // 3.参数名称和此处的方法名称对应
    callBack();
}
function b() {
    console.log("function:b");
}
function c() {
    console.log("function:c");
}
// 1.要回调的函数作为参数
main(b);
main(c);
</script>

protocol 属性

定义和用法
protocol 属性是一个可读可写的字符串,可设置或返回当前 URL 的协议。

图示
/git-pic/20160819181723.png

代码示例

<script type="text/javascript">
document.write(location.protocol);
</script>

输出:
http:

两个等号和三个等号的区别

===规则:

  1. 如果类型不同,就[不相等]
  2. 如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
  3. 如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
  4. 如果两个值都是true,或者都是false,那么[相等]。
  5. 如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
  6. 如果两个值都是null,或者都是undefined,那么[相等]。

==规则:

  1. 如果两个值类型相同,进行 === 比较。
  2. 如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
    a. 如果一个是null. 一个是undefined,那么[相等]。
    b. 如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
    c. 如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
    d. 如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻 烦,我也不大懂)
    e. 任何其他组合,都[不相等]。

其他琐碎

1. window.parent和window.opener

window.parent针对frame
window.opener针对的是打开子窗口的父窗口
可操作响应页面的属性和调用相关方法

2. instanceof 运算符

在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object"。

判断是否为数组

if(dataList instanceof Array){}
console.log(Object instanceof Object);//true
console.log(Function instanceof Function);//true
console.log(Number instanceof Number);//false
console.log(String instanceof String);//false

console.log(Function instanceof Object);//true

console.log(Foo instanceof Function);//true
console.log(Foo instanceof Foo);//false

3. 判断是否为空对象

function isEmptyObject(obj) { for (var key in obj) {  return false; } return true;}