浅谈关于JavaScript的语言特性分析

前言
JavaScript中,作用域、上下文、闭包、函数等算是精华中的精华了。对于初级JSer来说,是进阶必备。对于前端攻城师来说,只有静下心来,理解了这些精华,才能写出优雅的代码。

本文旨在总结容易忘记的重要知识,不会讲基本的概念。如果对基本知识不太熟悉,就去翻下《 JavaScript权威指南》吧~


语言特性函数表达式

先看代码段:

复制代码 代码如下:


[javascript] view plaincopyprint?
var f = function foo(){ 
    return typeof foo; // foo是在内部作用域内有效  
}; 
// foo在外部用于是不可见的  
typeof foo; // "undefined"  
f(); // "function" 
var f = function foo(){
    return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"

这里想说一点的就是,在函数表达式中的foo,只能在函数内部引用,外面是不能引用的。


json

很多JavaScript开发人员都错误地把JavaScript对象字面量(Object Literals)称为JSON对象(JSON Objects)。 JSON是设计成描述数据交换格式的,它也有自己的语法,这个语法是JavaScript的一个子集。

{ “prop”: “val” } 这样的声明有可能是JavaScript对象字面量,也有可能是JSON字符串,取决于什么上下文使用它。如果是用在string上下文(用单引号或双引 号引住,或者从text文件读取)的话,那它就是JSON字符串,如果是用在对象字面量上下文中,那它就是对象字面量。

复制代码 代码如下:


[javascript] view plaincopyprint?
// 这是JSON字符串  
var foo = '{ "prop": "val" }'; 
// 这是对象字面量  
var bar = { "prop": "val" }; 
// 这是JSON字符串
var foo = '{ "prop": "val" }';
// 这是对象字面量
var bar = { "prop": "val" };

还有一点需要知道的是,JSON.parse用来将JSON字符串反序列化成对象,JSON.stringify用来将对象序列化成JSON字符串。老版本的浏览器不支持这个对象,但你可以通过json2.js来实现同样的功能。


原型

复制代码 代码如下:


function Animal (){ 
    // ...
}
function cat (){ 
    // ...

cat.prototype = new Animal();//这种方式会继承构造函数里面的。
cat.prototype = Animal.prototype;//这种方式不会继承构造函数里面的。
//还有一个重要的细节需要注意的就是一定要维护自己的原型链,新手总会忘记这个!
cat.prototype.constructor = cat;

如果我们彻底改变函数的prototype属性(通过分配一个新的对象),那原始构造函数的引用就是丢失,这是因为我们创建的对象不包括constructor属性:

复制代码 代码如下:


function A() {}
A.prototype = {
  x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // false!

让我们一起看下MDN上关于constructor的解释吧:prototype:Returns a reference to the Object function that created the instance's prototype.因此,对函数的原型引用需要手工恢复:

复制代码 代码如下:


function A() {}
A.prototype = {
  constructor: A,
  x: 10
};
var a = new A();
alert(a.x); // 10
alert(a.constructor === A); // true

然而,提交prototype属性不会影响已经创建对象的原型(只有在构造函数的prototype属性改变的时候才会影响到),就是说新创建的对象才有有新的原型,而已创建对象还是引用到原来的旧原型(这个原型已经不能被再被修改了)。

复制代码 代码如下:


function A() {}
A.prototype.x = 10;
var a = new A();
alert(a.x); // 10
A.prototype = {
  constructor: A,
  x: 20
  y: 30
};
// 对象a是通过隐式的[[Prototype]]引用从原油的prototype上获取的值
alert(a.x); // 10
alert(a.y) // undefined
var b = new A();
// 但新对象是从新原型上获取的值
alert(b.x); // 20
alert(b.y) // 30

因此,“动态修改原型将影响所有的对象都会拥有新的原型”是错误的,新原型仅仅在原型修改以后的新创建对象上生效。这里的主要规则是:对象的原型是对象的创建的时候创建的,并且在此之后不能修改为新的对象,如果依然引用到同一个对象,可以通过构造函数的显式prototype引用,对象创建以后,只能对原型的属性进行添加或修改。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgsjf.html