【浏览笔记】javascript言语精炼

媒介

由于近来的项目用到了一些js的代码，所以我带着好奇心，仔细阅读了这本书，粗略地相识js言语的基础组织和特征，关于一些不熟习的新概念，以纪录的情势增强印象，也是对进修的深思总结。

一、字面量(literals)

“字面量“这个词在书中高频涌现，先看看他的定义：

字面量示意怎样表达这个值，平常撤除表达式，给变量赋值时，等号右侧都能够认为是字面量。

举个简朴的例子就邃晓了，比方

var a = 1;
var b = "hello world";
var c = [];
var d = {};
var e = function (a,b){return a + b;}

以上例子中，赋值号右侧都是字面量，分别是数字字面量，字符串字面量，数组字面量，对象字面量及函数字面量。

为何要有字面量呢？

我的明白，js和php一样都是弱范例言语，须要依据赋值号右侧的内容来推断变量的范例，而字面量就是为了很方便地根据指定规格建立新的对象，数组或许定义函数值，让我们更清楚地晓得我究竟定义了一个什么。

字面量与变量的区分？

1. 字面量都是一些不可转变的值，比方 ：1 2 3 4 5
2. 变量就像一个容器，能够用来保留字面量，而且变量的值是能够恣意转变的
3. 一般我们不会直接挪用字面量，而是先将字面量存到变量中，再举行挪用

二、对象(object)

真的应了先生说的，”万物皆对象“，在js中，没有类，有的只要对象，数组是对象，函数是对象，正则表达式是对象，固然，对象也是对象。

对象字面量(object literals)

写法很简朴，就是一对花括号括住“属性：值”对，这里就不再举例子了，对象是能够嵌套的，用点运算符来猎取对象的某个值

援用(reference)

对象不会复制，经由历程援用来通报，比方

var stooge = {
name : "Jack";
};
var x = stooge;
x.name = "Tom";
var result = stooge.name;


由于x与stooge指向同一个对象，所以此时result为”Tom“.

原型（prototype）

js里，每个对象都邑衔接一个原型对象，而且能够继承属性，一切经由历程字面量对象建立的对象都邑衔接到Object.prototype,它是js中标配对象

当建立一个对象时，能够挑选一个对象作为它的原型，，这有点像类的继承，详细完成的要领书中已帮我们写好了，直接拿来套用就行

var stooge = {
name : "Tom"
};
if (typeof Object.beget !== 'function') {
Object.create = function(o){
var F = function () {};
F.prototype = o;
return new F();
};
}
var another_stooge = Object.create(stooge);//another_stooge挑选stooge作为它的原型

关于原型，有几点须要注重

1. 对一个对象做出转变时，不影响它的原型，但转变原型的属性时，继承它的对象的属性也会转变，但不会转变继承今后新增的属性
2. 在原型当中增加属性，继承它的一切对象也会可见，转变原型的一个属性，继承它的对象的属性也会转变，删除原型的一个属性，继承它的对象也会删除
3. 假如b继承a，c继承b,那末就会构成原型链，假如猎取一个c中没有的属性,那末它会从b中找这个属性，假如b中也没有，它会从a中找，假如a中还没有，则返回undefined，此历程称为托付

关于第二条我有一个疑问，在原型中增加一个属性，继承它的对象是不是也增加了这个属性？

假如我直接检索一个对象的属性，由于托付的存在而使得我没法确认该属性是对象照样原型的

比方，我在上面的代码继承写

stooge.lastname = "jack";
var name = another_stooge.lastname;
document.writeln(name);

这时候，输出效果是jack，但这个jack是another_stooge的照样stooge的，我并不晓得。

这个实在在后面给出相识决要领，就是运用hasOwnProperty()这个要领

stooge.lastname = "jack";
var status = another_stooge.hasOwnProperty('lastname');
document.writeln(status);

运转效果：false
这个要体会搜检对象是不是具有独占属性，而且不会搜检原型链，假如是，返回true，不然返回false

罗列

运用typeof能够搜检对象属性的范例，用来过滤掉函数，而hasOwnProperty则能够过滤掉不关心的值，那末连系forin语句就能够遍历对象一切的值了

var name;
for (name in another_stooge) {
if (typeof another_stooge.name !== 'function') {
document.writeln(name + ':' another_stooge.name);
}
}


三、函数（Functions）

函数这部份触及的内容较多，种种挪用，回调，级联，影象等之前从没见过的用法

函数对象(Function Objects)

对象字面量建立对象，它衔接到object.prototype
函数字面量建立函数对象，它衔接到Function.prototype

风趣的是，函数在建立完以后，会生成自带属性和要领，函数不仅能够当“函数”运用，也能当“对象”运用，函数能够保留到变量，对象，数组中。函数能够当做另一个函数的参数，函数能够返回函数，函数以至能够具有函数（注重，不是在一个函数中挪用另一个函数，而是函数能够作为另一个函数的属性），当一个函数是另一个对象的属性时，函数被称为要领

四种函数的挪用形式

1.要领挪用形式

这类挪用要领在面向对象编程言语中最为罕见，当一个函数保留为一个对象的属性时，能够经由历程object.function()举行挪用

别的，要领能够经由历程this指针找到本身的对象，在要领内，能够经由历程this.another_function()，this.property运用或修正对象其他的要领和属性，在运用thinkphp历程当中，this的运用异常高频，所以如许的用法并不生疏

2.函数挪用形式

当函数定义在对象外部时，，经由历程function(value1,value2,etc)挪用成为函数挪用形式

函数挪用形式有一个贫苦的处所。

当函数定义在对象内部时，this指挪用函数的对象，当函数没有绑定在对象内时，默许指向全局对象（window）

然则当我在函数内定义了一个要领时，this应当指向对象，而现实却指向全局对象，这使得在定义函数内部的要领时不能运用该对象的其他属性辅佐完成，比方以下

var ob = {
value : 1,
add : function () {
var show = function () {
return this;
};
return show();
}
};
var result = add();
document.writeln(result);

运转效果：[object Window]
由效果可知，show要领中的this并没有指向ob，而是指向了全局对象。

解决要领：在外部函数内定义一个变量that并赋值为this，内部函数运用that，即可接见该对象

var ob = {
value : 1,
add : function () {
var that = this;
var show = function () {
return that.value;
};
return show();
}
};
var result = ob.add();
document.writeln(result);

运转效果：1
此时，show就能够接见ob.value了

3.组织器挪用形式

先上实例

var Person = function(name){
this.name = name;
};
var student = new Person("li");//组织一个Person对象，并将name属性赋值为li
document.writeln(student.name);

很眼熟，像极了类的组织函数，用法也是，直接new Function(value,etc)
这类组织对象的形式关于习惯了基于类的言语的我简直是福音，我看到时满满的亲切感

书上关于组织器挪用不是非常引荐，由于当运用此类函数时不加new修饰符会带来意想不到的毛病，既没有编译器提示也没有运转正告。在后面他提出了一个更好的解决办法——伪类，会这在以后举行详细的进修

4.Apply,Call挪用形式（上下文挪用形式）

书中对这类挪用的引见很少，我连系书和菜鸟教程做了一些本身的总结

Apply和Call都是函数自带的要领，功用一样，用法差别

apply：

1. 函数形式

var array = [1,2];
var add = function(number1,number2){
return number1 + number2;
};
var result = add.apply(null,array);//以window作为上下文
document.writeln(result);

2.要领形式

var array = [1,2];
var add = function(number1,number2){
return number1 + number2;
};
var o = { name : "jack"};
var result = add.apply(o,array);//以o作为上下文
document.writeln(result);

两种挪用，只是在参数上有所差别，第一个参数为null时，以window作为上下文，假如是对象，则以该对象为上下文

这个上下文是什么？有什么用？

这使我异常疑心，这类挪用看似很没用啊！

直到我看到一则实例，我才感受到它的魅力

问题：取得 div 与 p 标签, 并增加边框 border: 1px solid red

平常做法：

var p_list = document.getElementsByTagName('p');//猎取一切p标签，存到p_list
var div_list = document.getElementsByTagName('div');//猎取一切div标签，存到div_list
var i = 0;
for( ; i p_list[ i ].style.border = "1px solid red";//经由历程for轮回，挨个增加款式
}
for( i = 0; i div_list[ i ].style.border = "1px solid red";//经由历程for轮回，挨个增加款式
}

运用上下文形式：

var t = document.getElementsByTagName, arr = [];// 伪数组没有 push 要领，所以这里要 声明一个 数组
arr.push.apply( arr, t.apply( document, [ 'p' ] ) );// 现实上是把p标签，一个个当做参数放了进来
arr.push.apply( arr, t.apply( document, [ 'div'] ) );//同上
arr.forEach( function( val, index, arr ) {
val.style.border = '1px solid red';//运用foreach，只举行一次遍历，即可增加款式
});

上述实例的中心就是将两个数组兼并在一起，举行一次遍历

关于call，只是参数不再以数组情势封装，而是function.call(null,value1,value2,etc)如许的情势，在此不多做赘述

小结

1. 经由历程js，我初次接触到基于原型继承设想的言语，刚开始进修关于如许的设想不是很邃晓，也不邃晓原型设想的优点是什么。然则js的普遍运用证实它必定有它的上风，我没法明白申明我的手艺还达不到去明白一个言语精华的程度
2. js中到处表现着万物姐皆对象，到处是对象，这让我在一开始觉得费解，但随着进一步的进修，我发明，在js中，对象与其说是对象，不如说是属性和要领的鸠合，一个对象在定义之初，体系就已“免费”赠送了这个鸠合一些属性和要领，以如许的思绪去思索，就不难明白为何函数会是对象了
3. 函数的四种挪用要领，要领形式和函数形式我都异常熟习，只是函数挪用形式须要注重this与that，组织器形式作者并不引荐，只是作为相识，而上下文形式设想的奇妙我还不能完整体会，基础处于一头雾水。
4. Javascript言语精炼这本书觉得许多处所过于简单，须要我连系网上的一些材料辅佐才看懂，换言之，它并不合适新手入门，但是即便如此，我也抱着能看懂若干算若干的心态，去一窥这个言语的魅力