`
sanshizi
  • 浏览: 86023 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

[转]JavaScript 学习 - 提高篇

阅读更多


JavaScript 学习 - 提高篇

一. JavaScript中的对象.

JavaScript中的Object是一组数据的key-value的集合, 有点类似于Java中的HashMap, 所有这些数据都是Object里的property. 通常情况下, JavaScript中建立一个对象用"new"加上constructor function来实现. 如new Date(), new Object()等.

var book = new Object();
book.name = "JavaScript is Cool";
book.author = "tom";
book.pages = 514;

上面例子中的name和page就是名为book的对象中的property. 我们可以用delete来删除Object中的property: "delete book.name;". 除了Object, Date等buildin的对象外, 我们可以写自己的constructor function, 然后使用new就可以建立自己的对象. 如上面的book可以写成:

function Book (name, author, page) {
this.name = name;
this.author = author;
this.page = page;
}
var abook = new Book("JavaScript is Cool", "tom", 514);

二. function的用法

在JavaScript中, function是一种数据类型, 所有的function都是从buildin的Function object 衍生的对象. 所以在JavaScript 中function可以作为参数传递, 可以作为Object的property, 也可以当作函数返回值. function在JavaScript中有两种用法, 一种是当作constructor, 前面加上new keyword用来建立对象. 一种是当作method, 为其他对象调用.

注意function和method在中文里的意思相当, 在有些语言里也可以通用. 但是在JavaScript中, 它们还是有所区别的. function本身是是一个对象, 而当作为一个方法他属于一个对象时, 就成为了一个这个对象的method, 相当于一个对象种的属性. 也就是说method是相对于一个对象而言的, function在某些情况下成为了一个对象的method.

function Book(name, author, page) {
this.name = name;
this.author = author;
this.page = page;
this.getReader = Book_getReader;
}

function Book_getReader() {
//....
}

上面的例子种, function Book_getReader()就成为了Book的一个名为getReader的method. call()和apply()是Function object 的两个方法, 它们也可以使一个function作为另一个对象的method来调用用. call()和apply()都需要参数, 而第一个参数就是调用对象, 也就是当function内部出现this时, this所指的对象. call()和apply()的区别在于call()可以传递任意长度参数, 只要第一个参数时调用对象. 而apply只接受两个参数, 需要将除调用对象外的所有参数放入一个数组中. 即:

function getBooksWithSameAuthor(form, to) {
var name = this.author;
var books = ...
//get books written by name and from year "from" to year "to"
return books;
}

var abook = new Book("JavaScript is Cool", "tom", 514);
var books = getBooksWithSameAuthor.call(abook, 1990, 2005);

var books = getBooksWithSameAuthor.apply(abook, [1990, 2005]);

当一个function不作为一个对象的method时, JavaScript会认为它是属于一个Globle Object对象的method, 这个Globle Object在Browser中就是window类. 所以从这个角度来说, function和method又可以统一起来了.

Function object 还有一个非常重要的property: prototype. 它是一个predefined的prototype object. 当一个Function用作对象的constructor时, protptype property将发挥作用,中文翻译叫原型. JavaScript的新对象就是通过function的原型来建立的. 同时我们还可以利用prototype来动态的向对象中添加属性, 如:

function Book (name, author, page) {
this.name = name;
this.author = author;
this.page = page;
}
var abook = new Book("JavaScript is Cool", "tom", 514);

Book.prototype.getInfo = getInfo;
function getInfo() {
return this.name + " written by " + this.author + " with " + this.page + " pages";
}

alert(abook.getInfo());

这里有一个例子, 用prototype方法来实现callback:

Function.prototype.andThen=function(g) {
var f=this;
return function() {
f();g();
}
};

function Manager() {
this.callback=function () {}; // do nothing
this.registerCallback=function(callbackFunction) {
this.callback=(this.callback).andThen(callbackFunction);
}
}

var manager=new Manager();
manager.registerCallback(sayHi);
manager.registerCallback(sayBye);
manager.callback();

三. JavaScript中的OO
JavaScript中的对象是一个属性和方法的集合. JavaScript也有对应于Java的Class和Instance的概念.我们可以把JavaScript中定义的

function(Function类的子类)看作是Class, 而利用这个function构造的对象看是Instance. 对应于Java的Instance Property, Instance

Method, Class(static) property, Class Method, JavaScript都可以实现.
1. Instance Property
Instance Property就是cuntructor function中定义的property, 对于每一个instance都会有一份copy.
2. Class property
Class Property其实是cunstructor function作为对象本身所具有的属性(和Java不一样, Java中method不是数据, 更不是对象).
3. Instance Method
Instance Method是指属于某一对象的method, 方法内的this代表这个method从属的对象, 注意虽然是Instance Method, 并不是每一个Instance都有一个此方法的copy, 所有Instance 共享一个method.
4. Class Method
Class Method同样可以理解为constructor function作为对象自己具有的方法, 和由这个constructor建立的对象没有直接联系. 所以Class Method方法里使用this会产生混淆. 因为这个this指的不是期望操作的对象, 而是一个Function Object(constructor).

下面的例子定义了一个复数的对象, 包含有上述四种域, 值得仔细看看:
/*

* Complex.js:

* This file defines a Complex class to represent complex numbers.

* Recall that a complex number is the sum of a real number and an

* imaginary number and that the imaginary number i is the

* square root of -1.

*/

/*

* The first step in defining a class is defining the constructor

* function of the class. This constructor should initialize any

* instance properties of the object. These are the essential

* "state variables" that make each instance of the class different.

*/

function Complex(real, imaginary) {

this.x = real; // The real part of the number

this.y = imaginary; // The imaginary part of the number

}

/*

* The second step in defining a class is defining its instance

* methods (and possibly other properties) in the prototype object

* of the constructor. Any properties defined in this object will

* be inherited by all instances of the class. Note that instance

* methods operate implicitly on the this keyword. For many methods,

* no other arguments are needed.

*/

// Return the magnitude of a complex number. This is defined

// as its distance from the origin (0,0) of the complex plane.

Complex.prototype.magnitude = function( ) {

return Math.sqrt(this.x*this.x + this.y*this.y);

};

// Return a complex number that is the negative of this one.

Complex.prototype.negative = function( ) {

return new Complex(-this.x, -this.y);

};

// Convert a Complex object to a string in a useful way.

// This is invoked when a Complex object is used as a string.

Complex.prototype.toString = function( ) {

return "{" + this.x + "," + this.y + "}";

};

// Return the real portion of a complex number. This function

// is invoked when a Complex object is treated as a primitive value.

Complex.prototype.valueOf = function( ) { return this.x; }

/*

* The third step in defining a class is to define class methods,

* constants, and any needed class properties as properties of the

* constructor function itself (instead of as properties of the

* prototype object of the constructor). Note that class methods

* do not use the this keyword: they operate only on their arguments.

*/

// Add two complex numbers and return the result.

Complex.add = function (a, b) {

return new Complex(a.x + b.x, a.y + b.y);

};

// Subtract one complex number from another.

Complex.subtract = function (a, b) {

return new Complex(a.x - b.x, a.y - b.y);

};

// Multiply two complex numbers and return the product.

Complex.multiply = function(a, b) {

return new Complex(a.x * b.x - a.y * b.y,

a.x * b.y + a.y * b.x);

};

// Here are some useful predefined complex numbers.

// They are defined as class properties, where they can be used as

// "constants." (Note, though, that they are not actually read-only.)

Complex.zero = new Complex(0,0);

Complex.one = new Complex(1,0);

Complex.i = new Complex(0,1);

四. 对象的继承

JavaScript有多种方式模拟继承.
1. 利用function:

function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.bye = subBye;
}

或者:

function subClass() {
superClass.call(this);
}

先定义subClass的inheritFrom方法, 再调用这个方法(方法名称并不重要), 或者直接使用Function Object 的call 方法将this做参数, 都可以模拟实现从superClass的继承. 注意调用superClass时的this指向. 这个方法就是在执行subClass的cunstructor function时, 先执行supperClass的cunstructor function.这个方法的缺点在于子类仅仅是在自己的构造函数中, 将this作为参数调用了父类的构造函数, 将构造函数赋予父类的所有域赋予子类. 所以, 任何父类在构造函数之外(通过prototype)定义的域, 子类都无法继承. 而且子类的构造函数一定要在定义自己的域之前调用父类的构造函数, 免得子类的定义被父类覆盖. 使用这种方法子类也尽量不要使用prototype来定义子类的域, 因为prototype的定义在子类new的之后就执行, 所以它一定会在调用父类构造函数前, 同样会有被父类的定义覆盖的危险.


2. 利用prototype:

function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.bye = subBye;
}
subClass.prototype = new superClass();
subClass.prototype.constructor = superClass;

这里将一个superClass的实例设置成subclass的原型:protytype, 由于new superClass实例一定会调用父类prototype定义的所有域, 所以这种方法避免了上一种方法的一个问题, 父类可以通过prototype来描述域. 可以实现从superClass的继承. 而这个方法也有缺点, 由于子类的peototype已经是父类的实例(Object实例), 不能再被实例化, 所以new子类实例的时候, 父类的所有非基本数据类型(见JavaScript数据类型)都将是reference copy而非数据copy. 简单说就是所有的父类域在子类中虽然存在, 但看起来就像Java中的static域一样在子类间share.被一个子类改变, 所有子类都会改变.

注意这里的最后一句, 改变了子类prototype中的constructor属性. 它对子类使用没有影响, 仅仅是为了在调用instanceOf方法时它使得子类实例返回subClass.

3. Parasitic Inheritance (寄生继承)
function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.base = new supperClass();
base.sayBye = subBye;
return base;
}

这种继承其实是一种扩展, 因为在调用instanceOf时, 子类会返回父类名称, 它的好处在于在构造函数继承的基础上解放了父类, 父类可以使用prototype定义自己的域, 但是子类仍然不建议使用prototype, 以免被父类覆盖. 为了可以使子类的instanceof返回正确类型, 我们可以再改进一下:

function subClass() {
this.base = new supperClass();
for ( var key in this.base ) {
if ( !this[key] ) {
this[key] = this.base[key];
}
}
this.sayBye = subBye;
}

将所有的父类域拷贝给子类一份, 不再返回父类, instanceof子类实例时就可以返回正确类型.

五. this的用法

通常情况下, this代表的是前面提到的Globle Object.也就是Browser环境时的window Object. 当function作为某一对象的 method 时, this 代表这个 function 所属的 object. 下面这段代码有格错误, 涉及到this的使用:

function Employee(a) {
this.name = a;
}

function init(){
John = Employee("Johnson");
alert(John.name);
}

在init()中我们少了一个new keyword. 于是这个代码就会报错, 因为Browser把Employee当作是window obect的一个method, 里面的this指的就是window object. init()应该改为:

function init(){
John = new Employee("Johnson");
alert(John.name);
}

同时我们也可以将Employee的constructor函数修改, 防止类似的错误:

function Employee(a) {
if (!(this instanceof Employee)) return new Employee(a);
this.name = a;
}

这样,我们即使使用原来的init()方法, 也不会报错了.

六. Array in JavaScript
Array和Object本质上是一样的, 只是Array需要由index来索引它其中的属性. index为>=0的整数.
Array有一系列buildin的方法:
1. jion() 将array中的所有element以string的形式连在一起:
var a = [1,2,3];
s = a.join(); // s == "1,2,3"
s = a.join(": "); // s == "1: 2: 3"

2. reverse() 将Array的element顺数颠倒
var a = [1,2,3];
a.reverse();
s = a.join(); // s == "3,2,1"

3. sort() 排序, 默认按字母顺序排序case sensitive, 可以自定义排序方式.

var a = [111,4,33,2];
a.sort(); // a == [111,2,33,4]

a.sort(function(a,b) { // a == [2,4,33,111]
return a-b; // Returns < 0, 0, or > 0
});

4. concat()连接多个Array
var a = [1,2,3];
a.concat(4,5); // return [1,2,3,4,5]
a.concat([4,5]); // return [1,2,3,4,5]
a.concat([4,5], [6,7]) // return [1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]); // return [1,2,3,4,5,6,7]

5. slice() 返回Array的切片, 原Array不变.
var a = [1,2,3,4,5];
a.slice(0,3); // Returns [1,2,3]
a.slice(3); // Returns [4,5]
a.slice(1,-1); // Returns [2,3,4], -1 means the last index of the array
a.slice(-3,-2); // Returns [3], from the third last index to the second last index

6. splice 向一个Array中添加或删除element. 第一个参数表示位置, 第二个参数表示删除长度, 后面任意长的参数表示在1删除位置添加的elements.
var a = [1,2,3,4,5,6,7,8];
a.splice(4); // Returns [5,6,7,8]; a is [1,2,3,4]
a.splice(1,2); // Returns [2,3]; a is [1,4]
a.splice(1,1); // Returns [4]; a is [1]

var a = [1,2,3,4,5];
a.splice(2,0,'a','b'); // Returns []; a is [1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3); // Returns ['a','b']; a is [1,2,[1,2],3,3,4,5]

7. push() and pop() 向Array末尾添加或删除element
8. unshift() and shift() 向Array的开头添加或删除element
分享到:
评论

相关推荐

    JavaScript 学习 - 提高篇

    JavaScript 学习 - 提高篇 在本节课程中,我们将深入探讨 JavaScript 中的对象、函数、constructor 函数等高级概念。 JavaScript 中的对象 在 JavaScript 中,对象是一组数据的键值集合,类似于 Java 中的 ...

    JavaScript--倒计时

    本篇将深入探讨如何利用JavaScript实现一个功能完备的倒计时功能。 首先,我们需要理解倒计时的基本逻辑。倒计时的核心是计算当前时间与目标时间之间的差值,并根据这个差值实时更新显示的时间。JavaScript中的Date...

    Javascript教程--从入门到精通.rar

    JavaScript教程——从入门到精通,这是一份专为想要学习或深入理解JavaScript编程语言的人们设计的综合资源。JavaScript,通常简称为JS,是互联网上最广泛使用的客户端脚本语言,用于实现网页的动态交互。它与HTML和...

    JavaScript 学习 – 提高篇

    JavaScript 学习 – 提高篇 一. JavaScript中的对象. JavaScript中的Object是一组数据的key-value的集合, 有点类似于Java中的HashMap, 所有这些数据都是Object里的property. 通常情况下, JavaScript中建立一个对象用...

    JavaScript-学习笔记.docx

    JavaScript是一种广泛应用...以上就是JavaScript学习笔记中的主要知识点,理解和掌握这些内容对于深入学习JavaScript至关重要。在实际编程中,还需要结合具体的场景灵活运用,并不断实践和探索更高级的特性和最佳实践。

    《深入浅出JavaScript》PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一篇关于获取《深入浅出JavaScript》电子书的信息。下面我们将基于这个前提,围绕“深入浅出JavaScript”这一主题进行知识点的展开。 ### 深入浅出JavaScript概览 #### 一...

    JavaScript高级篇视频教程

    "JavaScript高级篇视频教程"旨在帮助已经掌握了JavaScript基础知识的学习者进一步提升技能,深入理解其高级特性,包括面向对象编程、异步处理、模块化、性能优化等多个方面。 在JavaScript的高级篇中,首先会讲解...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十:正则表达式

    本篇教程将深入探讨JavaScript中的正则表达式,帮助你理解和掌握这一核心概念。 一、正则表达式基础 1. 字面量表示法与构造函数:在JavaScript中,有两种创建正则表达式的方式。一种是字面量表示法,即使用`/...

    JavaScript入门篇,JavaScript基础知识

    在学习JavaScript的过程中,持续实践、不断阅读优秀的代码、及时复习和巩固知识,是成为熟练JavaScript开发者的必经之路。随着技能的提升,你将能够利用JavaScript创造出更多富有创意和功能强大的Web应用。

    Javascript - The Web Warrior Series 6th Edition

    《JavaScript - The Web Warrior Series 6th Edition》不仅是一本学习JavaScript的好书,也是Web开发者的必备指南。通过系统学习本书,读者不仅可以掌握JavaScript的核心知识,还能了解最新的开发趋势和技术动态,为...

    web自动化测试学习以及Javascript学习(四)

    【标题】"Web自动化测试学习以及JavaScript学习(四)"主要涵盖了两个核心主题:Web自动化测试和JavaScript编程。本文将深入探讨这两个领域的关键知识点,并结合实际应用进行详细讲解。 在Web自动化测试方面,通常...

    JavaScript语言精粹--蝴蝶

    这篇文档《JavaScript语言精粹——蝴蝶》旨在深入探讨并解析JavaScript的精华部分,帮助开发者更好地理解和掌握这门语言。 一、JavaScript基础 JavaScript的基础包括变量、数据类型、运算符、流程控制等。在...

    JavaScript学习文档

    以上只是JavaScript学习文档的部分要点,实际的学习过程中,还需要结合实际项目实践,不断探索和深化理解,才能真正掌握这门语言的精髓。通过阅读这份文档,相信你会对JavaScript有更全面、深入的认识。

    最全javascript 学习资料

    这篇详尽的资料集包含了丰富的JavaScript学习资源,对于任何希望深入理解和掌握JavaScript的人来说,都是一份宝贵的财富。 首先,"JavaScript语言参考手册.chm"是一本全面的JavaScript指南,它涵盖了语言的基础到...

    网络编程基础篇系列-javascript

    JavaScript是Web开发中的核心语言,尤其在网络编程领域扮演着至关重要的角色。本系列教程将带你深入理解JavaScript在网络...通过学习和实践这些内容,你将能够运用JavaScript创建出功能强大、用户体验优秀的网络应用。

    java新手教程--入伍篇

    - **Ajax工作原理**:介绍Ajax(异步JavaScript和XML)的核心概念,包括请求响应模型、`onreadystatechange`属性与`readyState`状态,实现Web页面局部刷新,提高用户交互体验。 以上知识点覆盖了从Java基础到Web...

    JavaScript学习笔记之总结与回顾(学习JavaScript基础知识看这一篇就够了,文章总字数2.8万)源码

    这篇“JavaScript学习笔记之总结与回顾”涵盖了从基础到进阶的广泛内容,总计2.8万字,旨在为学习者提供一个全面的理解JavaScript的平台。 在学习JavaScript时,首先会接触的是基本的语法结构,包括常量、变量和...

    网页制作教程--入门篇

    这个“网页制作教程--入门篇”是针对初学者设计的,旨在帮助他们掌握网页设计的基础知识,尽管它可能不涉及高级技术,但对于想要踏入这个领域的学习者来说,是一个很好的起点。 在压缩包中的文件,我们可以看到以下...

    TypeScript学习文档-基础篇(完结).doc

    TypeScript 学习文档 - 基础篇(完结) TypeScript 是一种静态类型的、编译时执行的语言,作为 JavaScript 的超集,增加了类型系统和其他一些功能。下面是 TypeScript 学习文档的基础篇,涵盖了 TypeScript 的基本...

Global site tag (gtag.js) - Google Analytics