JavaScript 学习 - 提高篇


Posted in Javascript onFebruary 02, 2007

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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JavaScript函数绑定用法实例分析
Nov 14 Javascript
深入理解node.js http模块
Jan 24 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 #Javascript
How to Auto Include a Javascript File
Feb 02 #Javascript
Code:loadScript( )加载js的功能函数
Feb 02 #Javascript
JavaScript脚本性能的优化方法
Feb 02 #Javascript
JavaScript中“+=”的应用
Feb 02 #Javascript
HTTP状态代码以及定义(解释)
Feb 02 #Javascript
任意位置显示html菜单
Feb 01 #Javascript
You might like
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
Python环境变量设置方法
2016/08/28 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
python 高阶函数简单介绍
2021/02/19 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
新闻报道策划方案
2014/06/11 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
如何写好竞聘报告
2019/04/03 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技