重走JAVA编程路，javascript最接近前后端的语言

疯狂科技站 2017-02-24 07:01

第二天，重新认识javascript

JS学习小结：

学习JavaScript脚本语言，首先我们要知道JavaScript是什么？

Javascript是什么，简称Js，Js是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。

Js交互图

当前什么越来越强调沟通，而Js是最接近前后端的语言，越来越多的前后端框架的支持，使他的前途很明朗，作为一种解释型语言，Js强调实时，在线。

先看下Js的特性：脚本编写语言，基于对象的语言，简单性，安全性，动态性和跨平台特性。

Js的命名规范：有两种常用的命名规则

匈牙利命名法的原则：变量名=属性+类型+对象描述。他的关键是：以一个或多个小写字母作为前缀，前缀之后是一个或多个首字母大写的单词组合，该单词指明变量的用途。

驼峰命名法的原则：第一个单词以小写字母开始，之后每一个单词的首字母大写。例如：myFirstName、myLastName，这样的变量名看上去就像驼峰一样此起彼伏，因此得名。驼峰法的关键是：除第一个单词外，其他单词首字母大小，混合使用大小写字母来构成变量名和函数名，还可以使用下划线来形成逻辑断点，这样更能增强代码的可读性。

JS的注释规范：

JS中单行注释用“ // 注释内容” 标识，多行注释使用“ /* 注释内容 */ “标识。注释的作用是提高代码的可读性，不仅自己以后用着方便，也有助于别人阅读和理解你所编写的JS代码，注释中的内容不会在网页中显示。为了方便阅读，注释一般放在需要解释的语句结尾处或者周围。

在JavaScript中四种基本的数据类型：数值（整数和实数）、字符串型（用“”号或‘’括起来的字符或数值）、布尔型（使True或False表示）和空值。在JavaScript的基本类型中的数据可以是常量，也可以变量。由于JavaScript采用弱类型的形式，因而一个数据的变量或常量不必首先作声明，而是在使用或赋值时确定其数据的类型的。当然也可以先声明该数据的类型，它是通过在赋值时自动说明其数据类型的。

Js还有一种拓展类型，那就是：Undefined 数据类型

一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。

--------------------------------------------------------------------------------------------------------------------

下面是一下常用语法：

1.对象定义方式

空对象：没有任何属性和方法

var obj = {};

定义对象的属性：

obj.xx = "123";

定义对象的方法：

obj.function = function(){};

--------------------------------------------------------------------------------------------------------------------

2.函数的定义方式：

JavaScript函数定义

Function 函数名 （参数,变元）{

函数体;.

Return 表达式;

}

说明：

当调用函数时,所用变量或字面量均可作为变元传递。

函数由关键字Function定义。

函数名：定义自己函数的名字。

参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。

通过指定函数名（实参）来调用一个函数。

必须使用Return将值返回。

函数名对大小写是敏感的。

函数中的形式参数：

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。

例：

Function function_Name(exp1,exp2,exp3,exp4)

Number =function _Name . arguments .length;

if (Number>1）

document.wrile(exp2);

if (Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...

--------------------------------------------------------------------------------------------------------------------

3 对象的引用传递

var person={name:'anker',age:100};

var x = person;

x.age = 19;

console.log(x.age);//19

console.log(person.age);//19

说明js中对象的赋值也是采用引用的方式，同时指向同一个对象。

function changebj(obj) {obj.age = 10};

changebj(person);

console.log(person.age);

10//打印结果也是10,说明函数传递的也是对象的引用。修改的是同一个对象。

person.sex = '男';//若该属性不存在则添加，若存在则覆盖。

访问对象的方式：

obj.name

obj["name"]或者obj['name']//必须采用双引号或者单引号括起来

--------------------------------------------------------------------------------------------------------------------

4.匿名函数

（function(){//代码 })();  //可立即执行的匿名函数

解释：，包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。

例子：(function(arg){ alert(arg+100); })(20);

这个例子返回120。

匿名函数，就是没有引用直接加上()进行执行的函数。

var addFunc = function(a,b){

cosole.log(a+b);

};

--调用方式

addFunc(1,2);

--匿名函数

(function(a,b){console.log(a+b)})(1,2);

上面两个函数的产生的结果是一样的.只不过addFunc为函数对象的引用,而匿名函数不存在引用.

--来看个复杂的利用匿名函数的例子

var add = (function(){

var sum = 0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})(); --加上括号为匿名函数的写法,可以理解为直接执行了此函数,函数的执行结果返回

add(1,2,3,4);

add(2);

--等价于

var func1 = function(){

var sum = 0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

};

var add = func1();

add(1,2,3,4);

add(2);

//现在有一个场景，需要设计一个函数，前面每次调用，不会真正去计算，而是把参数保存下来，等到需要计算的再一起计算

var currying = function(fn){

var args = [] ;

return function(){

if(arguments.length === 0){

return fn.apply(this,args);

}else {

Array.prototype.push.apply(args,arguments);

return arguments.callee;

}

};

}

var add = (function(){

var sum = 0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})();

var add = currying(add);

add(1);

add(2);

add(3);

add();

---------------------------------------------------------------------------------------------------------------------

5.闭包

可以理解成一个函数内的内部函数，它被创建在一个函数内部，引用这其外部函数的变量值。

var a = function(){

var x = 1;

return function(y){

console.log(x+=y);//外部函数的x值就被包裹在引用对象中

}

}

var b = a();//实际上是返回function(y){...}的引用

b();//执行上面的引用，此时的x值变成了private的属性

闭包的两个作用：

1.可以读取函数体所在外部函数的局部变量

2.就是让这些变量的值始终保持在内存中

------------------------------------------------------------------------------------------------------------------------

6.constructor

constructor 属性返回对创建此对象的数组函数的引用。

var test=new Array();

if (test.constructor==Array)//判断test的构造函数是否是Array

{

document.write("This is an Array");

}

var createPerson = function(name,sex,age){

this.name = name;

this.sex = sex;

this.age = age;

};

//undefined

var p1 = new createPerson('z1',19,'男');

//undefined

p1.constructor

//输出

function (name,sex,age){

this.name = name;

this.sex = sex;

this.age = age;

}

p1.constructor == createPerson

//输出：true

createPerson.constructor

//Function() { [native code] } //createPerson构造函数为Function,从一个侧面说明function也是对象

------------------------------------------------------------------------------------------------------------------------

7.js ==与 ===的区别

一个等号是赋值操作，==先转换类型再比较，进行值的对比。

而===先判断类型，如果不是同一类型直接为false，只有类型和值全部都相等，才相等。

------------------------------------------------------------------------------------------------------------------------

8.JS中一切皆对象

JS中基本数据类型，也存在着对象封装，比如下面数字123的构造函数是Number,test的构造函数是String，包含length的属性

(123).constructor

//输出：function Number() { [native code] }

'test'.constructor

//输出：String() { [native code] }

'test'.length;

//输出：4

//扩展Number的函数

Number.prototype.toString = function(){

alert('hi,I\'m a number ');

};

(123).toString();

//输出：hi,I\'m a number

Number.prototype

Number {toString: null, [[PrimitiveValue]]: 0}

------------------------------------------------------------------------------------------------------------------------

9.prototype原型

每个对象都连接到一个原型对象，并且可以从中继承属性。所有通过{}或者构造函数创建的对象都连接到Object{}

对象通过(对象名称.__proto__)可以查看原型

或者通过(对象名称.constructor.prototype)查看原型

var createPerson = function(name,sex,age){

this.name = name;

this.sex = sex;

this.age = age;

};

var p1 = new createPerson('z1',19,'男');

p1.constructor

//输出：

fucntion(name,sex,age){

this.name = name;

this.sex = sex;

this.age = age;

}

p1.constructor.prototype

//输出：

Object {}

createPerson.prototype

//输出：

Object {}

p1.constructor.prototype === createPerson.prototype

true

var p2 = {sex:'男'};

p2.constructor.prototype

//输出：Object {}

/*

在javascript中，创建一个新对象时，可以选择某个对象作为它的原型，比如

*/

var person = {name:'z3',age:18,sex:'男'};

Object.create = function(o){

var F = function(){};

F.prototype = o ;

return new F();

};

var anotherPerson = Object.create(person);

anotherPerson.name;//z3

//对原型对象进行更新,发现已创建的对象值也随着变化

person.name = 'z4';

"z4"

anotherPerson.name

//输出："z4"

//但当对象增加相同的属性后,原型对象的属性变化，不影响对象的属性值。因为对象读取值首先读取本身对象的值，后读取原型的值

anotherPerson.name = 'z5';

person.name = 'z6';

//输出："z6"

anotherPerson.name

//输出："z5"

delete anotherPerson.name

//输出：true

anotherPerson.name//输出对象本身的属性值,原型对象的属性值不会被删除,除非通过delete 原型对象.属性输出.

//输出："z6"

delete person.name

//输出：true

anotherPerson.name

//输出：undefined

//原型连接什么时候起作用呢？只有在检索值的时候才被用到

//如果尝试者去获取对象的某个属性值，但该对象没有此属性名，那么JAVASCRIPT会尝试着从原型对象中获取属性值。

//如果原型对象也没有该属性值则再从它的原型找，直到该过程最后达到终点Object.prototype。Object

//如果想要的属性完全不存在于原型链中，那么结果就是undefined。

person.age = 18;

anotherPerson.age//显示什么？

//原型关系是一种动态的关系。如果添加一个新的属性到原型中，该属性会立即对所有基于该原型创建的对象可见。

anotherPerson.__proto__===person;//true

__proto__显示对象的原型链

//可以使用hasOwnProperty方法来判断对像是否含有某个属性，如果对象拥有独有的属性，则返回true

//这个方法不会去检查原型链

------------------------------------------------------------------------------------------------------------------

10. arguments

arguments 对象是函数内部的本地变量；arguments 已经不再是函数的属性了。

你可以在函数内部通过使用 arguments 对象来获取函数的所有参数。这个对象为传递给函数的每个参数建立一个条目，

条目的索引号从 0 开始。例如，如果一个函数有三个参数，你可以通过以下方式获取参数：

arguments[0]

arguments[1]

arguments[2]

参数也可以被重新赋值:

arguments[1] = 'new value';

arguments 对象并不是一个真正的Array。它类似于数组，但没有数组所特有的属性和方法，除了 length。

例如，它没有 pop 方法。不过可以将其转换成数组

------------------------------------------------------------------------------------------------------------------------

11.利用JS特性实现AOP

AOP就是面向切面编程，主要作用是把一些核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能

通常包括日志统计，安全控制，异常处理等。把这些功能抽离出来后，又通过动态织入的方式渗入到业务逻辑模块中

在JAVA中，可以通过反射和动态代理机制来实现AOP。但对于javascript这种动态语言，AOP的实现更加简单

在javascript中实现AOP，都是指把一个函数动态织入到另外一个函数中。我们可以通过扩展Function.prototype来做到这一点

*/

Function.prototype.before = function(beforefn){

var that = this ;

return function(){

beforefn.apply(this,arguments);

return that.apply(this,arguments);

};

};

Function.prototype.after = function(afterfn){

var that = this ;

return function(){

var ret =that.apply(this,arguments);

afterfn.apply(this,arguments);

return ret ;

};

};

var func = function(){

console.log(2);

};

func = func.before(function(){

console.log(1);

}).after(function(){

console.log(3);

});

func();

var func1 = document.getElementById;

undefined

func1('nt-contents');

//报错信息如下, 是由于document.getElementById函数中的this指向为windows对象,而windows对象不存在这些变量。

VM245:1 Uncaught TypeError: Illegal invocation(…)

//写那么复杂主要是将this的指向还是定位到document上面

var getElementById1 = (function(func){

return function(){

return func.apply(document,arguments);

}

})(document.getElementById);

------------------------------------------------------------------------------------------------------------------------

12.利用JS特性实现一些有趣的Function

var getId = document.getElementById1; //返回 这个对象 function(){return func.apply(document,arguments);}

var div = getId('ntp-contents');//返回func.apply(document,arguments)的对象，arguments参数值div1,func执行闭包中的document.getElementById函数

alert(div.id);

//我们上节课讲到，怎么在一个内部函数中保持外层的this上下使用了一个变量that来保存外,还可以使用以下方法

Function.prototype.bind =function(context){

var self = this ;

return function(){

alert(self);

alert(context);

return self.apply(context,arguments);

}

};

var obj ={name : 'steven'};

var func = (function(){

alert(this.name)

}).bind(obj);

var isType =function(type){

return function(obj){

return Object.prototype.toString.call(obj)==='[object '+type+']';

};

};

var isString = isType('String');

isString('hello world');

var isArray = isType('Array');

isArray([2,3]);

13.call、apply的使用

语法

function.call(thisObj,param1,param2,param3...);

function.apply(thisObj,[param1,param2,param3...]);

用法是改变function的作用域，将参数的上下文作用域修改成thisObj对象, 也可以说this对象为thisObj.

默认的function的作用域是window，this相当于window.function