JavaScript对象基础与Promise对象实现详解

JavaScript对象基础

JavaScript中的各类数据如字符串、数值、数组和函数均被视为对象。本文将整理并介绍JavaScript中常见对象的使用方法，以及Promise对象的具体实现方式。

对象无处不在

window对象属性与方法

window对象

常用属性与方法概览

location属性

该属性存储当前页面的URL地址。若修改此属性，浏览器将自动导航至新的URL地址。

status属性

该属性包含将在浏览器状态栏显示的字符串，通常显示在窗口左下角。

onload事件

该属性用于指定在页面完全加载后需要执行的函数。

document对象

该对象包含DOM（文档对象模型）结构。

alert方法

用于显示一个提示框。

prompt方法

功能类似于alert，但允许用户输入信息并返回。

open方法

用于打开一个新的浏览器窗口。

close方法

用于关闭当前窗口。

setTimeout方法

在指定的时间间隔后调用一次处理函数。

setInterval方法

以指定的时间间隔反复调用处理函数。

关于window.onload的讨论

通过将函数赋值给window的onload属性，可以确保代码在页面加载和DOM完全构建完成之前不会执行。

用于修改DOM的函数

 window.onload = function(){
   //code here 
 }
 //function是一个匿名函数，赋给onload

我们不应写成window.onload = init()，因为这样会立即调用函数，而不是使用其引用值。

将函数的引用赋值给window对象的onload属性，可使该函数在页面加载完成后自动执行。

创建window.onload处理程序有两种方式：使用具名函数或使用匿名函数。

这两种方式执行效果基本相同。但如果该函数需要在其他地方复用，则建议使用具名函数。

document对象操作

document对象

常用属性与方法概览

domain属性

提供托管文档的服务器的域名，例如kelion.com。

title属性

通过document.title可以获取文档的标题。

URL属性

表示文档的URL地址。

getElementById方法

根据指定的元素ID获取对应的DOM元素。

getElementsByTagName方法

getElementsByClassName方法

这两个方法与前述方法类似，但分别通过HTML标签名和CSS类名来获取元素集合。

createElement方法

用于创建适合插入到DOM中的新元素节点。

关于createElement的讨论

 //创建<li>元素，
 var li = document.createElement("li"); 
 //给刚创建的元素赋值
 li.innerHTML = "songName";
 //获取<ul>元素
 var ul = document.getElementById("playlist")
 //把<li>元素增加到ul中
 ul.appendChild(li)

注意：在执行第8行代码之前，li元素始终独立于DOM树之外。

元素对象与事件监听

元素对象

常用属性与方法概览

innerHTML属性

包含元素内部的HTML内容。

childElementCount属性

保存元素直接子元素的数量。

firstChild属性

指向第一个子节点。

appendChild方法

insertBefore方法

用于插入元素，使其成为指定元素的子节点。

getAttribute方法与setAttribute方法

使用这两个方法来设置和获取元素中的属性，例如“src”、“id”、“class”等。

最后介绍button对象

button对象有一个常用属性：

onclick（用于监听按钮是否被按下）。

var button = document.getElementById("Button"); //button只是一个变量名，可以是button1，button2等等，但本质是一个按钮 button.onclick = handleButtonClick;

Promise对象实现原理

ps：浅谈Javascript中Promise对象的实现

很多做前端的朋友应该都听说过Promise（或者Deferred）对象，今天我就讲一下我对Promise的认识

Promise的作用与必要性

What？

Promise是CommonJS的规范之一，拥有resolve、reject、done、fail、then等方法，能够帮助我们控制代码的流程，避免函数的多层嵌套。如今异步在web开发中越来越重要，对于开发人员来说，这种非线性执行的编程会让开发者觉得难以掌控，而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象，年底即将发布的ES6也将原生实现Promise

Why

想象这样一个场景，两个异步请求，第二个需要用到第一个请求成功的数据，那么我们代码可以这样写

  ajax({
    url: url1,
    success: function(data) {
      ajax({
        url: url2,
        data: data,
        success: function() {
        }
      });
    }
  });

如果继续下去在回调函数中进行下一步操作，嵌套的层数会越来越多。我们可以进行适当的改进，把回调函数写到外面

 function A() {
    ajax({
      url: url1,
      success: function(data) {
        B(data);
      }
    });
  }
  function B(data) {
    ajax({
      url: url2,
      success: function(data) {
        ......
      }
    });
  }

即使是改写成这样，代码还是不够直观，但是如果有了Promise对象，代码就可以写得非常清晰，一目了然，请看

new Promise(A).done(B);

这样函数B就不用写在A的回调中了

Promise基础实现思路

How

目前的ES标准中还未支持Promise对象，那么我们就自己动手，丰衣足食吧。思路大致是这样的，用2个数组(doneList和failList)分别存储成功时的回调函数队列和失败时的回调队列 * state: 当前执行状态，有pending、resolved、rejected3种取值 * done: 向doneList中添加一个成功回调函数 * fail: 向failList中添加一个失败回调函数 * then: 分别向doneList和failList中添加回调函数 * always: 添加一个无论成功还是失败都会调用的回调函数 * resolve: 将状态更改为resolved,并触发绑定的所有成功的回调函数 * reject: 将状态更改为rejected,并触发绑定的所有失败的回调函数 * when: 参数是多个异步或者延迟函数，返回值是一个Promise兑现，当所有函数都执行成功的时候执行该对象的resolve方法，反之执行该对象的reject方法

下面是我的具体实现过程：

var Promise = function() {
  this.doneList = [];
  this.failList = [];
  this.state = 'pending';
};
Promise.prototype = {
  constructor: 'Promise',
  resolve: function() {
    this.state = 'resolved';
    var list = this.doneList;
    for(var i = 0, len = list.length; i < len; i++) {
      list[0].call(this);
      list.shift();
    }
  },
  reject: function() {
    this.state = 'rejected';
    var list = this.failList;
    for(var i = 0, len = list.length; i < len; i++){
      list[0].call(this);
      list.shift();
    }
  },
  done: function(func) {
    if(typeof func === 'function') {
      this.doneList.push(func);
    }
    return this;
  },
  fail: function(func) {
    if(typeof func === 'function') {
      this.failList.push(func);
    }
    return this;
  },
  then: function(doneFn, failFn) {
    this.done(doneFn).fail(failFn);
    return this;
  },
  always: function(fn) {
    this.done(fn).fail(fn);
    return this;
  }
};
function when() {
  var p = new Promise();
  var success = true;
  var len = arguments.length;
  for(var i = 0; i < len; i++) {
    if(!(arguments[i] instanceof Promise)) {
      return false;
    }
    else {
      arguments[i].always(function() {
        if(this.state != 'resolved'){
          success = false;
        }
        len--;
        if(len == 0) {
          success ? p.resolve() : p.reject();
        }
      });
    }
  }
  return p;
}
Improve

目前只是实现了Promise的基础功能，但仍然还有无法处理的情况，例如要实现3个或3个以上的异步请求的串行，目前我的Promise没有办法支持new Promise(A).then(B).then(C)这样的形式，jQuery在1.7的版本中为Deferred(Promise)对象实现了pipe函数，可以通过这个函数实现上述功能，代码为$.Deferred(A).pipe(B).then(C)，我尝试去读了jQuery这部分的代码，但是没能读懂，希望有大神能够给一些实现思路