教你用 HTML5 制作Flappy Bird(上)

2014/03/22 · HTML5,
JavaScript · 5
评论 ·
HTML5,
Javascript

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转载!
英文出处:lessmilk。欢迎加入翻译组。

大概在两个月前,我给自己定了一个目标:每周在制作一个HTML5新游戏。截至目前,我已经有了9款游戏。现在很多人希望我能写一下如何制作这些游戏,在这篇文章中,让我们来一起用HTML5制作Flappy
Bird。

澳门微尼斯人手机版 1

Flappy
Bird是一款非常优秀且容易上手的游戏,可以作为一个很好的HTML5游戏的教程。在这片教程中,我们使用Phaser框架写一个只有65行js代码的简化版Flappy
Bird。

点击此处可以先体验一下我们即将要制作的游戏。

提示1:你得会JavaScript
提示2:想学习更多关于Phaser框架的知识可以看这篇文章getting started
tutorial(最近工作忙,稍后翻译)

深入解读 JavaScript 中的面向对象编程

2017/07/07 · JavaScript
·
面向对象

原文出处: 景庄   

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化、多态、和封装几种技术。
对 JavaScript
而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力。
本文将会深入的探讨有关使用 JavaScript
进行面向对象编程的一些核心基础知识,包括对象的创建,继承机制,
最后还会简要的介绍如何借助 ES6
提供的新的类机制重写传统的JavaScript面向对象代码。

JavaScript 原生对象及扩展

2016/09/26 · JavaScript
· 对象

原文出处: trigkit4   

设置

先下载我为教程制作的模板,里面包括:

  • phaser.min.js, 简化了的Phaser框架v1.1.5
  • index.html, 用来展示游戏的文件
  • main.js, 我们写代码的地方
  • asset/, 用来保存小鸟和管子的图片的文件夹(bird.png和pipe.png)

用浏览器打开index.html,用文本编辑器打开main.js

在main.js中可以看到我们之前提到的Phaser工程的基本结构

JavaScript

// Initialize Phaser, and creates a 400x490px game var game = new
Phaser.Game(400, 490, Phaser.AUTO, 'game_div'); // Creates
a new 'main' state that will contain the game var
main_state = { preload: function() { // Function called first to load
all the assets }, create: function() { // Fuction called after
'preload' to setup the game }, update: function() { //
Function called 60 times per second }, }; // Add and start the
'main' state to start the game
game.state.add('main', main_state);
game.state.start('main');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');
 
// Creates a new 'main' state that will contain the game
var main_state = {
 
    preload: function() {
        // Function called first to load all the assets
    },
 
    create: function() {
        // Fuction called after 'preload' to setup the game    
    },
 
    update: function() {
        // Function called 60 times per second
    },
};
 
// Add and start the 'main' state to start the game
game.state.add('main', main_state);  
game.state.start('main');

接下来我们一次完成preload(),create()和update()方法,并增加一些新的方法。

面向对象的几个概念

在进入正题前,先了解传统的面向对象编程(例如Java)中常会涉及到的概念,大致可以包括:

  • 类:定义对象的特征。它是对象的属性和方法的模板定义。
  • 对象(或称实例):类的一个实例。
  • 属性:对象的特征,比如颜色、尺寸等。
  • 方法:对象的行为,比如行走、说话等。
  • 构造函数:对象初始化的瞬间被调用的方法。
  • 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
  • 封装:一种把数据和相关的方法绑定在一起使用的方法。
  • 抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。
  • 多态:不同的类可以定义相同的方法或属性。

在 JavaScript
的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同,例如,JavaScript
中没有原生的“类”的概念,
而只有对象的概念。因此,随着你认识的深入,我们会混用对象、实例、构造函数等概念。

内置对象与原生对象

内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集;而后者包括了一些在运行过程中动态创建的对象。

澳门微尼斯人手机版 2

小鸟的制作

我们先来看如何添加一个用空格键来控制的小鸟。

首先我们来更新preload(),create()和update()方法。

JavaScript

preload: function() { // Change the background color of the game
this.game.stage.backgroundColor = '#71c5cf'; // Load the
bird sprite this.game.load.image('bird',
'assets/bird.png'); }, create: function() { // Display the
bird on the screen this.bird = this.game.add.sprite(100, 245,
'bird'); // Add gravity to the bird to make it fall
this.bird.body.gravity.y = 1000; // Call the 'jump' function
when the spacekey is hit var space_key =
this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
space_key.onDown.add(this.jump, this); }, update: function() { // If
the bird is out of the world (too high or too low), call the
'restart_game' function if (this.bird.inWorld == false)
this.restart_game(); },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
preload: function() {  
    // Change the background color of the game
    this.game.stage.backgroundColor = '#71c5cf';
 
    // Load the bird sprite
    this.game.load.image('bird', 'assets/bird.png');
},
 
create: function() {  
    // Display the bird on the screen
    this.bird = this.game.add.sprite(100, 245, 'bird');
 
    // Add gravity to the bird to make it fall
    this.bird.body.gravity.y = 1000;  
 
    // Call the 'jump' function when the spacekey is hit
    var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    space_key.onDown.add(this.jump, this);    
},
 
update: function() {  
    // If the bird is out of the world (too high or too low), call the 'restart_game' function
    if (this.bird.inWorld == false)
        this.restart_game();
},

在这三个方法下面,我们再添加两个新的方法。

JavaScript

// Make the bird jump jump: function() { // Add a vertical velocity to
the bird this.bird.body.velocity.y = -350; }, // Restart the game
restart_game: function() { // Start the 'main' state, which
restarts the game this.game.state.start('main'); },

1
2
3
4
5
6
7
8
9
10
11
// Make the bird jump
jump: function() {  
    // Add a vertical velocity to the bird
    this.bird.body.velocity.y = -350;
},
 
// Restart the game
restart_game: function() {  
    // Start the 'main' state, which restarts the game
    this.game.state.start('main');
},

保存main.js并刷新index.html后你就可以得到一个用空格键来控制的小鸟了。

对象(类)的创建

在JavaScript中,我们通常可以使用构造函数来创建特定类型的对象。诸如
Object 和 Array
这样的原生构造函数,在运行时会自动出现在执行环境中。此外,我们也可以创建自定义的构造函数。例如:

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } var person1 = new Person(‘Weiwei’, 27, ‘Student’); var
person2 = new Person(‘Lily’, 25, ‘Doctor’);

1
2
3
4
5
6
7
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);

按照惯例,构造函数始终都应该以一个大写字母开头(和Java中定义的类一样),普通函数则小写字母开头。
要创建 Person 的新实例,必须使用
new
操作符。
以这种方式调用构造函数实际上会经历以下4个步骤:

  1. 创建一个新对象(实例)
  2. 将构造函数的作用域赋给新对象(也就是重设了this的指向,this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

在上面的例子中,我们创建了 Person 的两个实例 person1person2

这两个对象默认都有一个 constructor 属性,该属性指向它们的构造函数
Person,也就是说:

JavaScript

console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

1
2
console.log(person1.constructor == Person);  //true
console.log(person2.constructor == Person);  //true

原生对象(New后的对象)

ECMA-262 把原生对象(native object)定义为“独立于宿主环境的
ECMAScript 实现提供的对象”。包括如下:

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp(正则表达式)

1
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp(正则表达式)

由此可以看出,简单来说,原生对象就是 ECMA-262 定义的类(引用类型)。

来源:

管子的制作

在preload()中添加管子的载入

JavaScript

this.game.load.image('pipe', 'assets/pipe.png');

1
this.game.load.image('pipe', 'assets/pipe.png');

然后再在create()中添加画一组管子的方法。因为我们在游戏中要用到许多管子,所以我们先做一个包含20段管子的组。

JavaScript

this.pipes = game.add.group(); this.pipes.createMultiple(20,
'pipe');

1
2
this.pipes = game.add.group();  
this.pipes.createMultiple(20, 'pipe');

现在我们需要一个新的方法来把管子添加到游戏中,默认情况下,所有的管子都没有被激活也没有显示。我们选一个管子激活他并显示他,保证他在不在显示的情况下移除他的激活状态,这样我们就有用不尽的管子了。

JavaScript

add_one_pipe: function(x, y) { // Get the first dead pipe of our group
var pipe = this.pipes.getFirstDead(); // Set the new position of the
pipe pipe.reset(x, y); // Add velocity to the pipe to make it move left
pipe.body.velocity.x = -200; // Kill the pipe when it's no longer
visible pipe.outOfBoundsKill = true; },

1
2
3
4
5
6
7
8
9
10
11
12
13
add_one_pipe: function(x, y) {  
    // Get the first dead pipe of our group
    var pipe = this.pipes.getFirstDead();
 
    // Set the new position of the pipe
    pipe.reset(x, y);
 
    // Add velocity to the pipe to make it move left
    pipe.body.velocity.x = -200;
 
    // Kill the pipe when it's no longer visible
    pipe.outOfBoundsKill = true;
},

之前的方法只显示了一段管子,但是我们在一条垂直的线上要显示6段,并保证中间有一个能让小鸟通过的缺口。下面的方法实现了此功能。

JavaScript

add_row_of_pipes: function() { var hole =
Math.floor(Math.random()*5)+1; for (var i = 0; i < 8; i++) if (i !=
hole && i != hole +1) this.add_one_pipe(400, i*60+10); },

1
2
3
4
5
6
7
add_row_of_pipes: function() {  
    var hole = Math.floor(Math.random()*5)+1;
 
    for (var i = 0; i &lt; 8; i++)
        if (i != hole &amp;&amp; i != hole +1)
            this.add_one_pipe(400, i*60+10);  
},

我们需要每1.5秒调用一次add_row_of_pipes()方法来实现管子的添加。为了达到这个目的,我们在create()方法中添加一个计时器。

JavaScript

this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes,
this);

1
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

最后在restart_game()方法的最前面添加下面这行代码来实现游戏重新开始时停止计时器。

JavaScript

this.game.time.events.remove(this.timer);

1
this.game.time.events.remove(this.timer);

现在可以测试一下了,已经有点儿游戏的样子了。

自定义对象的类型检测

我们可以使用instanceof操作符进行类型检测。我们创建的所有对象既是Object的实例,同时也是Person的实例。
因为所有的对象都继承自Object

JavaScript

console.log(person1 instanceof Object); //true console.log(person1
instanceof Person); //true console.log(person2 instanceof Object);
//true console.log(person2 instanceof Person); //true

1
2
3
4
console.log(person1 instanceof Object);  //true
console.log(person1 instanceof Person);  //true
console.log(person2 instanceof Object);  //true
console.log(person2 instanceof Person);  //true

内置对象(不需要New)

定义:由ECMAScript实现提供的对象,独立于宿主环境,在一个脚本程序执行的开始处。

:每个内置对象(built-in object)都是原生对象(Native Object),一个内置的构造函数是一个内置的对象,也是一个构造函数。

来源:

举个栗子:

Native objects: Object (constructor), Date, Math, parseInt, eval。
string 方法比如 indexOf 和 replace, array 方法, … Host objects
(假定是浏览器环境): window, document, location, history, XMLHttpRequest,
setTimeout, getElementsByTagName, querySelectorAll, …

1
2
3
Native objects: Object (constructor), Date, Math, parseInt, eval。 string 方法比如 indexOf 和 replace, array 方法, …
 
Host objects (假定是浏览器环境): window, document, location, history, XMLHttpRequest, setTimeout, getElementsByTagName, querySelectorAll, …

ECMA-262][2 只定义了两个新的内置对象,即 GlobalMath
(它们也是原生对象,根据定义,每个内置对象都是原生对象)。

以下是ECMA-262定义的内置对象(built-in):

global、Object、Function、Array、String、Boolean、Number、Math、Date、RegExp、JSON、Error对象(Error,
EvalError, RangeError, ReferenceError, SyntaxError, TypeError
和URIError)

1
global、Object、Function、Array、String、Boolean、Number、Math、Date、RegExp、JSON、Error对象(Error,   EvalError, RangeError, ReferenceError,   SyntaxError, TypeError 和URIError)

澳门微尼斯人手机版 3

我们也可以修改内置对象的原型

JavaScript

if (!Array.prototype.forEach) { Array.prototype.forEach = function(fn){
for ( var i = 0; i < this.length; i++ ) { fn( this[i], i, this ); }
}; } [“a”, “b”, “c”].forEach(function(value, index, array){ assert(
value, “Is in position ” + index + ” out of ” + (array.length – 1) );
});

1
2
3
4
5
6
7
8
9
10
11
if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn){
    for ( var i = 0; i < this.length; i++ ) {
      fn( this[i], i, this );
    }
  };
}
["a", "b", "c"].forEach(function(value, index, array){
  assert( value, "Is in position " + index + " out of " + (array.length – 1) );
});

以上代码将输出:

PASS Is in position 0 out of 2 PASS Is in position 1 out of 2 PASS Is in
position 2 out of 2

1
2
3
PASS Is in position 0 out of 2
PASS Is in position 1 out of 2
PASS Is in position 2 out of 2

注意:扩展原型是很危险的:

JavaScript

Object.prototype.keys = function(){ var keys = []; for ( var i in this
) keys.push( i ); return keys; }; var obj = { a: 1, b: 2, c: 3 };
assert( obj.keys().length == 3, “We should only have 3 properties.” );
delete Object.prototype.keys;

1
2
3
4
5
6
7
8
9
10
11
12
Object.prototype.keys = function(){
  var keys = [];
  for ( var i in this )
    keys.push( i );
  return keys;
};
var obj = { a: 1, b: 2, c: 3 };
assert( obj.keys().length == 3, "We should only have 3 properties." );
delete Object.prototype.keys;

输出: FAIL We should only have 3 properties.

如果不是有特殊需要而去扩展原生对象和原型(prototype)的做法是不好的

JavaScript

//不要这样做 Array.prototype.map = function() { // code };

1
2
3
4
//不要这样做
Array.prototype.map = function() {
    // code
};

除非这样做是值得的,例如,向一些旧的浏览器中添加一些ECMAScript5中的方法。
在这种情况下,我们一般这样做:

XHTML

<script type=”text/javascript”> if (!Array.prototype.map) {
Array.prototype.map = function() { //code }; } </script>

1
2
3
4
5
6
7
<script type="text/javascript">
    if (!Array.prototype.map) {
        Array.prototype.map = function() {
            //code
        };
    }
</script>

实现得分和碰撞

最后一步我们来实现得分和碰撞,这很简单。
在create()中添加下面的代码来实现分数的显示。

JavaScript

this.score = 0; var style = { font: "30px Arial", fill:
"#ffffff" }; this.label_score = this.game.add.text(20, 20,
"0", style);

1
2
3
this.score = 0;  
var style = { font: &quot;30px Arial&quot;, fill: &quot;#ffffff&quot; };  
this.label_score = this.game.add.text(20, 20, &quot;0&quot;, style);

下面的代码放入add_row_of_pipes()用来实现分数的增加。

JavaScript

this.score += 1; this.label_score.content = this.score;

1
2
this.score += 1;  
this.label_score.content = this.score;

下面的代码放入update()方法来实现每次碰到管子时调用restart_game()。

JavaScript

this.game.physics.overlap(this.bird, this.pipes, this.restart_game,
null, this);

1
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);

大功告成!恭喜你获得了一个Flappy
bird的HTML5版。点击这里获得全部资源。

游戏的功能已实现,但实在是太简陋了。下面的教程我们来添加音效、动画、菜单等。
教你用 HTML5 制作Flappy Bird(下)

原文作者twitter:@lessmilk

赞 收藏 5
评论

构造函数的问题

我们不建议在构造函数中直接定义方法,如果这样做的话,每个方法都要在每个实例上重新创建一遍,这将非常损耗性能。
——不要忘了,ECMAScript中的函数是对象,每定义一个函数,也就实例化了一个对象。

幸运的是,在ECMAScript中,我们可以借助原型对象来解决这个问题。

用原型扩展对象

对js原生对象的扩展无非就是往prototype里注册,例如,我们可以往String对象里扩展ltrim,rtrim等方法。js每个对象都继承自Object,并且,对象和其他属性都通过prototype对象来继承。通过prototype对象,我们可以扩展任何对象,包括内建的对象,如StringDate

关于作者:杨帅

澳门微尼斯人手机版 4

(新浪微博:@JAVA程序员杨帅)

个人主页 ·
我的文章

澳门微尼斯人手机版 5

借助原型模式定义对象的方法

我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向该函数的原型对象
该对象包含了由特定类型的所有实例共享的属性和方法。也就是说,我们可以利用原型对象来让所有对象实例共享它所包含的属性和方法。

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 通过原型模式来添加所有实例共享的方法 // sayName()
方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () { console.log(this.name); }; var
person1 = new Person(‘Weiwei’, 27, ‘Student’); var person2 = new
Person(‘Lily’, 25, ‘Doctor’); console.log(person1.sayName ===
person2.sayName); // true person1.sayName(); // Weiwei
person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 通过原型模式来添加所有实例共享的方法
// sayName() 方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () {
  console.log(this.name);
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei
person2.sayName(); // Lily

正如上面的代码所示,通过原型模式定义的方法sayName()为所有的实例所共享。也就是,
person1person2访问的是同一个sayName()函数。同样的,公共属性也可以使用原型模式进行定义。例如:

JavaScript

function Chinese (name) { this.name = name; } Chinese.prototype.country
= ‘China’; // 公共属性,所有实例共享

1
2
3
4
function Chinese (name) {
    this.name = name;
}
Chinese.prototype.country = ‘China’; // 公共属性,所有实例共享

当我们new Person()时,返回的Person实例会结合构造函数中定义的属性、行为和原型中定义的属性、行为,
生成最终属于Person实例的属性和行为。

构造函数中定义的属性和行为的优先级要比原型中定义的属性和行为的优先级高,如果构造函数和原型中定义了同名的属性或行为,
构造函数中的属性或行为会覆盖原型中的同名的属性或行为。

String对象的扩展

JavaScript

<script type=”text/javascript”> if(typeof
String.prototype.ltrim==’undefined’){ String.prototype.ltrim =
function(){ var s = this; s = s.replace(/^\s*/g, ”); return s; } }
if(typeof String.prototype.rtrim==’undefined’){ String.prototype.rtrim =
function(){ var s = this; s = s.replace(/\s*$/g, ”); return s; } }
if(typeof String.prototype.trim==’undefined’){ String.prototype.trim =
function(){ return this.ltrim().rtrim(); } } if(typeof
String.prototype.htmlEncode==’undefined’){ String.prototype.htmlEncode =
function(encodeNewLine){//encodeNewLine:是否encode换行符 var s = this; s
= s.replace(/&/g, ‘&’); s = s.replace(/</g, ‘<‘); s =
s.replace(/>/g, ‘>’); s = s.replace(/’/g, ‘"’);
if(encodeNewLine){ s = s.replace(/\r\n/g, ‘<br />’); s =
s.replace(/\r/g, ‘<br />’); s = s.replace(/\n/g, ‘<br
/>’); } return s; } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript">
    if(typeof String.prototype.ltrim==’undefined’){
        String.prototype.ltrim = function(){
            var s = this;
            s = s.replace(/^\s*/g, ”);
            return s;
        }
    }
 
    if(typeof String.prototype.rtrim==’undefined’){
        String.prototype.rtrim = function(){
            var s = this;
            s = s.replace(/\s*$/g, ”);
            return s;
        }
    }
 
    if(typeof String.prototype.trim==’undefined’){
        String.prototype.trim = function(){
            return this.ltrim().rtrim();
        }
    }
 
    if(typeof String.prototype.htmlEncode==’undefined’){
        String.prototype.htmlEncode = function(encodeNewLine){//encodeNewLine:是否encode换行符
            var s = this;
            s = s.replace(/&/g, ‘&amp;’);
            s = s.replace(/</g, ‘&lt;’);
            s = s.replace(/>/g, ‘&gt;’);
            s = s.replace(/’/g, ‘&quot;’);
            if(encodeNewLine){
                s = s.replace(/\r\n/g, ‘<br />’);
                s = s.replace(/\r/g, ‘<br />’);
                s = s.replace(/\n/g, ‘<br />’);
            }
            return s;
        }
    }
</script>

原型对象

现在我们来深入的理解一下什么是原型对象。

只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。
在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
也就是说:Person.prototype.constructor指向Person构造函数。

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。
当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象。ES5中称这个指针为[[Prototype]]
在Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__(目前已被废弃);而在其他实现中,这个属性对脚本则是完全不可见的。
要注意,这个链接存在于实例与构造函数的原型对象之间,而不是实例与构造函数之间

这三者关系的示意图如下:

澳门微尼斯人手机版 6

上图展示了Person构造函数、Person的原型对象以及Person现有的两个实例之间的关系。

  • Person.prototype指向了原型对象
  • Person.prototype.constructor又指回了Person构造函数
  • Person的每个实例person1person2都包含一个内部属性(通常为__proto__),person1.__proto__person2.__proto__指向了原型对象

Date对象的扩展

getDaysInMonth:获取某月有多少天

JavaScript

Date.getDaysInMonth = function (year, month) { var days = 0; switch
(month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: days
= 31 break; case 4: case 6: case 9: case 11: days = 30; break; case 2:
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) days = 29;
else days = 28; break; } return days; } if (typeof Date.prototype.format
== ‘undefined’) { Date.prototype.format = function (mask) { var d =
this; var zeroize = function (value, length) { if (!length) length = 2;
value = String(value); for (var i = 0, zeros = ”; i < (length –
value.length); i++) { zeros += ‘0’; } return zeros + value; }; return
mask.replace(/”[^”]*”|'[^’]*’|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g,
function ($0) { switch ($0) { case ‘d’: return d.getDate(); case ‘dd’:
return zeroize(d.getDate()); case ‘ddd’: return [‘Sun’, ‘Mon’, ‘Tue’,
‘Wed’, ‘Thr’, ‘Fri’, ‘Sat’][d.getDay()]; case ‘dddd’: return
[‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’,
‘Saturday’][d.getDay()]; case ‘M’: return d.getMonth() + 1; case
‘MM’: return zeroize(d.getMonth() + 1); case ‘MMM’: return [‘Jan’,
‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’,
‘Dec’][d.getMonth()]; case ‘MMMM’: return [‘January’, ‘February’,
‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’,
‘October’, ‘November’, ‘December’][d.getMonth()]; case ‘yy’: return
String(d.getFullYear()).substr(2); case ‘yyyy’: return d.getFullYear();
case ‘h’: return d.getHours() % 12 || 12; case ‘hh’: return
zeroize(d.getHours() % 12 || 12); case ‘H’: return d.getHours(); case
‘HH’: return zeroize(d.getHours()); case ‘m’: return d.getMinutes();
case ‘mm’: return zeroize(d.getMinutes()); case ‘s’: return
d.getSeconds(); case ‘ss’: return zeroize(d.getSeconds()); case ‘l’:
return zeroize(d.getMilliseconds(), 3); case ‘L’: var m =
d.getMilliseconds(); if (m > 99) m = Math.round(m / 10); return
zeroize(m); case ‘tt’: return d.getHours() < 12 ? ‘am’ : ‘pm’; case
‘TT’: return d.getHours() < 12 ? ‘AM’ : ‘PM’; case ‘Z’: return
d.toUTCString().match(/[A-Z]+$/); // Return quoted strings with the
surrounding quotes removed default: return $0.substr(1, $0.length – 2);
} }); }; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
Date.getDaysInMonth = function (year, month) {
            var days = 0;
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    days = 31
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    days = 30;
                    break;
                case 2:
                    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0))
                        days = 29;
                    else
                        days = 28;
                    break;
            }
            return days;
        }
 
        if (typeof Date.prototype.format == ‘undefined’) {
            Date.prototype.format = function (mask) {
 
                var d = this;
 
                var zeroize = function (value, length) {
 
                    if (!length) length = 2;
 
                    value = String(value);
 
                    for (var i = 0, zeros = ”; i < (length – value.length); i++) {
 
                        zeros += ‘0’;
 
                    }
 
                    return zeros + value;
 
                };
 
                return mask.replace(/"[^"]*"|'[^’]*’|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) {
 
                    switch ($0) {
 
                        case ‘d’: return d.getDate();
 
                        case ‘dd’: return zeroize(d.getDate());
 
                        case ‘ddd’: return [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thr’, ‘Fri’, ‘Sat’][d.getDay()];
 
                        case ‘dddd’: return [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’][d.getDay()];
 
                        case ‘M’: return d.getMonth() + 1;
 
                        case ‘MM’: return zeroize(d.getMonth() + 1);
 
                        case ‘MMM’: return [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’][d.getMonth()];
 
                        case ‘MMMM’: return [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’][d.getMonth()];
 
                        case ‘yy’: return String(d.getFullYear()).substr(2);
 
                        case ‘yyyy’: return d.getFullYear();
 
                        case ‘h’: return d.getHours() % 12 || 12;
 
                        case ‘hh’: return zeroize(d.getHours() % 12 || 12);
 
                        case ‘H’: return d.getHours();
 
                        case ‘HH’: return zeroize(d.getHours());
 
                        case ‘m’: return d.getMinutes();
 
                        case ‘mm’: return zeroize(d.getMinutes());
 
                        case ‘s’: return d.getSeconds();
 
                        case ‘ss’: return zeroize(d.getSeconds());
 
                        case ‘l’: return zeroize(d.getMilliseconds(), 3);
 
                        case ‘L’: var m = d.getMilliseconds();
 
                            if (m > 99) m = Math.round(m / 10);
 
                            return zeroize(m);
 
                        case ‘tt’: return d.getHours() < 12 ? ‘am’ : ‘pm’;
 
                        case ‘TT’: return d.getHours() < 12 ? ‘AM’ : ‘PM’;
 
                        case ‘Z’: return d.toUTCString().match(/[A-Z]+$/);
 
                            // Return quoted strings with the surrounding quotes removed    
 
                        default: return $0.substr(1, $0.length – 2);
 
                    }
 
                });
 
            };
        }

查找对象属性

从上图我们发现,虽然Person的两个实例都不包含属性和方法,但我们却可以调用person1.sayName()
这是通过查找对象属性的过程来实现的。

  1. 搜索首先从对象实例本身开始(实例person1sayName属性吗?——没有)
  2. 如果没找到,则继续搜索指针指向的原型对象person1.__proto__sayName属性吗?——有)

这也是多个对象实例共享原型所保存的属性和方法的基本原理。

注意,如果我们在对象的实例中重写了某个原型中已存在的属性,则该实例属性会屏蔽原型中的那个属性。
此时,可以使用delete操作符删除实例上的属性。

使用原生js实现复制对象及扩展

jQueryextend()方法能很方便的实现扩展对象方法,这里要实现的是:使用原生js实现复制对象,扩展对象,类似jQuery中的extend()方法

JavaScript

var obj1 = { name : ‘trigkit4’, age : 22 }; var obj2 = { name : ‘frank’,
age : 21, speak : function(){ alert(“hi, I’m + name “); } }; var obj3 ={
age : 20 }; function cloneObj(oldObj) { //复制对象方法 if
(typeof(oldObj) != ‘object’) return oldObj; if (oldObj == null) return
oldObj; var newObj = Object(); for (var i in oldObj) newObj[i] =
cloneObj(oldObj[i]); return newObj; } function extendObj() {
//扩展对象 var args = arguments;//将传递过来的参数数组赋值给args变量 if
(args.length < 2) return; var temp = cloneObj(args[0]);
//调用复制对象方法 for (var n = 1; n < args.length; n++) { for (var i
in args[n]) { temp[i] = args[n][i]; } } return temp; } var obj
=extendObj(obj1,obj2,obj3); console.log(obj);//{ name: ‘frank’, age: 20,
speak: [Function] } console.log(obj1);//{ name: ‘trigkit4’, age: 22 }
console.log(obj2);//{ name: ‘frank’, age: 21, speak: [Function] }
console.log(obj3);//{ age: 20 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var obj1 = {
    name : ‘trigkit4’,
    age : 22
};
var obj2 = {
    name : ‘frank’,
    age : 21,
    speak : function(){
        alert("hi, I’m + name ");
    }
};
 
var obj3 ={
    age : 20
};
 
function cloneObj(oldObj) { //复制对象方法
    if (typeof(oldObj) != ‘object’) return oldObj;
    if (oldObj == null) return oldObj;
    var newObj = Object();
    for (var i in oldObj)
        newObj[i] = cloneObj(oldObj[i]);
    return newObj;
}
 
function extendObj() { //扩展对象
    var args = arguments;//将传递过来的参数数组赋值给args变量
    if (args.length < 2) return;
    var temp = cloneObj(args[0]); //调用复制对象方法
    for (var n = 1; n < args.length; n++) {
        for (var i in args[n]) {
            temp[i] = args[n][i];
        }
    }
    return temp;
}
var obj =extendObj(obj1,obj2,obj3);
console.log(obj);//{ name: ‘frank’, age: 20, speak: [Function] }
console.log(obj1);//{ name: ‘trigkit4’, age: 22 }
console.log(obj2);//{ name: ‘frank’, age: 21, speak: [Function] }
console.log(obj3);//{ age: 20 }

Object.getPrototypeOf()

根据ECMAScript标准,someObject.[[Prototype]] 符号是用于指派
someObject 的原型。
这个等同于 JavaScript 的 __proto__
属性(现已弃用,因为它不是标准)。
从ECMAScript 5开始, [[Prototype]]
可以用Object.getPrototypeOf()Object.setPrototypeOf()访问器来访问。

其中Object.getPrototypeOf()在所有支持的实现中,这个方法返回[[Prototype]]的值。例如:

JavaScript

person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

1
2
person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

也就是说,Object.getPrototypeOf(p1)返回的对象实际就是这个对象的原型。
这个方法的兼容性请参考该链接)。

es5-safe 模块

es5-safe 模块里,仅扩展了可以较好实现的可以安全使用的部分方法,包括:

JavaScript

Function.prototype.bind Object.create Object.keys Array.isArray
Array.prototype.forEach Array.prototype.map Array.prototype.filter
Array.prototype.every Array.prototype.some Array.prototype.reduce
Array.prototype.reduceRight Array.prototype.indexOf
Array.prototype.lastIndexOf String.prototype.trim Date.now

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Function.prototype.bind
Object.create
Object.keys
Array.isArray
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.every
Array.prototype.some
Array.prototype.reduce
Array.prototype.reduceRight
Array.prototype.indexOf
Array.prototype.lastIndexOf
String.prototype.trim
Date.now

详情:

Object.keys()

要取得对象上所有可枚举的实例属性,可以使用ES5中的Object.keys()方法。例如:

JavaScript

Object.keys(p1); // [“name”, “age”, “job”]

1
Object.keys(p1); // ["name", "age", "job"]

此外,如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyName()方法。

对象的创建

JavaScript
支持四种类型的对象:内部对象、生成的对象、宿主给出的对象(如 Internet
浏览器中的 windowdocument)以及ActiveX 对象(外部组件)。

Microsoft Jscript 提供了 11
个内部(或“内置”)对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error澳门微尼斯人手机版,
以及 String 对象。每一个对象有相关的方法和属性,

JavaScript中对象的创建有以下几种方式:

(1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造

1
2
3
(1)使用内置对象
(2)使用JSON符号
(3)自定义对象构造

更简单的原型语法

在上面的代码中,如果我们要添加原型属性和方法,就要重复的敲一遍Person.prototype。为了减少这个重复的过程,
更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。
参考资料。

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 重写整个原型对象 Person.prototype = { //
这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
constructor: Person, // Attention! sayName: function () {
console.log(this.name); } }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 重写整个原型对象
Person.prototype = {
  
  // 这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
  constructor: Person, // Attention!
  sayName: function () {
    console.log(this.name);
  }
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName();  // Weiwei
person2.sayName();  // Lily

在上面的代码中特意包含了一个constructor属性,并将它的值设置为Person,从而确保了通过该属性能够访问到适当的值。
注意,以这种方式重设constructor属性会导致它的[[Enumerable]]特性设置为true。默认情况下,原生的constructor属性是不可枚举的。
你可以使用Object.defineProperty()

JavaScript

// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, “constructor”, { enumerable:
false, value: Person });

1
2
3
4
5
// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});

一、使用内置对象

JavaScript可用的内置对象可分为两种:
1,JavaScript语言原生对象(语言级对象),如String、Object、Function等;
2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

1
2
3
4
JavaScript可用的内置对象可分为两种:
 
1,JavaScript语言原生对象(语言级对象),如String、Object、Function等;
2,JavaScript运行期的宿主对象(环境宿主级对象),如window、document、body等。

组合使用构造函数模式和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,
而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方的引用,
最大限度的节省了内存。

内置对象列表

Array Boolean Date Error EvalError Function Infinity JSON Map Math NaN
Number Object ParallelArray Promise Proxy RegExp Set String Symbol
SyntaxError Uint32Array WeakSet decodeURI decodeURIComponent()
encodeURI() encodeURIComponent() escape()已废弃 eval() isFinite()
isNaN() null parseFloat parseInt undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Array
Boolean
Date
Error
EvalError
Function
Infinity
JSON
Map
Math
NaN
Number
Object
ParallelArray
Promise
Proxy
RegExp
Set
String
Symbol
SyntaxError
Uint32Array
WeakSet
decodeURI
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()已废弃
eval()
isFinite()
isNaN()
null
parseFloat
parseInt
undefined

以上资料来源于:

继承

大多的面向对象语言都支持两种继承方式:接口继承和实现继承。ECMAScript只支持实现继承,而且其实现继承主要依靠原型链来实现。

前面我们知道,JavaScript中实例的属性和行为是由构造函数和原型两部分共同组成的。如果我们想让Child继承Father
那么我们就需要把Father构造函数和原型中属性和行为全部传给Child的构造函数和原型。

自定义对象构造

创建高级对象构造有两种方式:使用“this”关键字构造、使用原型prototype构造

发表评论

电子邮件地址不会被公开。 必填项已用*标注