云顶娱乐-云顶娱乐游戏平台官网
做最好的网站
当前位置: 云顶娱乐 > 云顶娱乐 > 正文

通晓JavaScript的原型属性,完结及应用

时间:2019-10-05 16:40来源:云顶娱乐
驾驭JavaScript的原型属性 2016/06/21 · JavaScript· 2 评论 ·原型 本文由 伯乐在线 -alvendarthy翻译,sunshinebuel校稿。未经许可,幸免转发! 匈牙利(Magyarország)语出处:bytearcher。应接参预翻译

驾驭JavaScript的原型属性

2016/06/21 · JavaScript · 2 评论 · 原型

本文由 伯乐在线 - alvendarthy 翻译,sunshinebuel 校稿。未经许可,幸免转发!
匈牙利(Magyarország)语出处:bytearcher。应接参预翻译组。

理解 JavaScript 的prototype属性不太轻便。你或然知道它同面向对象编制程序(OOP)和对象继承有关,但未必对其才具原理特别掌握。

换个思路清楚Javascript中的this

2017/07/27 · JavaScript · this

初稿出处: Leechikit   

在网络海人民广播广播台湾大学稿子都对 Javascript 中的 this 做了详实的牵线,但大概是介绍各种绑定格局或调用方式下 this 的针对性,于是本人想有两个统一的思路来更加好明白 this 指向,使大家越来越好判定,以下有部分剧情不是常理,而是一种解题思路。

javascript 函数中的 this 的多样绑定方式

2017/08/16 · JavaScript · this

原稿出处: 奶奶的彭湖湾   

 javascript中的this和函数荣辱与共,所以后日,小编就给大家详细地陈述一番:javascript函数中的this

一聊起this,相当多令人晕晕乎乎的抽象概念就跑出来了,此间作者就只说最基本的一些——函数中的this总指向调用它的对象,接下去的好玩的事都将围绕那点展开

 

(指示前排的管仲们预备好茶水和西瓜,小编要早先讲故事啊!!)

【逸事】有八个后生叫“迪斯”(this),有一天,迪斯非常大心穿越到三个叫 “伽瓦斯克利”(javascript)的 异世界,此时此刻迪斯身无分文, 他首先要做的作业正是——找到他的下榻的地方——调用函数的靶子云顶娱乐 1

教你用 HTML5 制作Flappy Bird(下)

2014/03/23 · HTML5, JavaScript · 1 评论 · HTML5, Javascript

本文由 伯乐在线 - 杨帅 翻译。未经许可,制止转发!
克罗地亚共和国语出处:lessmilk。迎接加入翻译组。

在上一篇HTML5教程中,大家做了叁个简化版的Flappy 伯德。即使能够“堪当”是一款游戏了,但却是一款很无聊的游玩。在那篇小说中大家来看一看怎么着给它增多动画效率和音响效果。即便并从未变动游戏的机制,但却能够使游戏变得特别有趣。你能够点击这里先感受一下。

Base64 的法规、达成及运用

2016/04/06 · 基础技巧 · 1 评论 · Base64

正文小编: 伯乐在线 - Natumsol 。未经小编许可,禁绝转发!
款待参加伯乐在线 专栏撰稿人。

简介

Base64是一种基于陆十一个可打字与印刷字符来代表二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为三个单元,对应某些可打字与印刷字符。多少个字节有二十二个比特,对应于4个Base64单元,即3个字节供给用4个可打字与印刷字符来表示。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Za-z、数字0-9,那样共有陆十三个字符,别的的多少个可打字与印刷符号在不一致的系统中而分歧,日常为+/

原型承接

面向对象编制程序能够由此重重门路达成。别的的语言,比方Java,使用基于类的模子完成: 类及对象实例差别对待。但在 JavaScript 中尚无类的定义,取代他的是整整皆对象。JavaScript 中的继承通过原型承接达成:贰个对象直接从另一对象承接。对象中带有其一而再种类中祖先的援用——对象的 prototype 属性。

class 关键字是在 ES6 中第三遍引进 JavaScript 的。其实,它并未为面向对象承袭引进新模型, class 关键字通过语法糖,完成了本文介绍的原型天性和构造函数。

从call方法初步

call 方法允许切换函数实施的上下文蒙受(context),即 this 绑定的靶子。

好多介绍 this 的稿子中都会把 call 方法放到最终介绍,但此文大家要把 call 方法放在第4个人介绍,并从 call 方法切入来商量 this ,因为 call 函数是显式绑定 this 的对准,大家来探视它如何模拟达成(不思索传入 nullundefined 和原始值):

Function.prototype.call = function(thisArg) { var context = thisArg; var arr = []; var result; context.fn = this; for (let i = 1, len = arguments.length; i < len; i++) { arr.push('arguments[' + i + ']'); } result = eval("context.fn(" + arr + ")"); delete context.fn; return result; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Function.prototype.call = function(thisArg) {
    var context = thisArg;
    var arr = [];
    var result;
 
    context.fn = this;
 
    for (let i = 1, len = arguments.length; i < len; i++) {
        arr.push('arguments[' + i + ']');
    }
 
    result = eval("context.fn(" + arr + ")");
 
    delete context.fn;
 
    return result;
}

从以上代码大家得以见到,把调用 call 方法的函数作为第三个参数对象的措施,此时一定于把第多少个参数对象作为函数施行的上下文蒙受,而 this 是指向函数实践的上下文境况的,由此 this 就针对了第二个参数对象,达成了 call 方法切换函数施行上下文情况的法力。

this的暗中同意绑定

 

【故事——线路1】只要迪斯(this)直到天黑前都尚未找到能收留本人的安身之地,他即刻快要过上澳洲难民的生活, 这时候,一人杀身成仁的魔术师乡长——window救世主平日地现身了:先住在小编家吧!云顶娱乐 2

【正文】

当一个函数未有显明的调用对象的时候,也正是然而作为单身函数调用的时候,将对函数的this使用默许绑定:绑定到全局的window对象

JavaScript

function fire () { console.log(this === window) } fire(); // 输出true

1
2
3
4
function fire () {
     console.log(this === window)
}
fire(); // 输出true

地点的例子笔者深信不疑对大许多人都相当粗略,但一些时候大家把例子变一下就可以拥有吸引性:

JavaScript

function fire () { // 笔者是被定义在函数内部的函数哦! function innerFire() { console.log(this === window) } innerFire(); // 独立函数调用 } fire(); // 输出true

1
2
3
4
5
6
7
8
function fire () {
  // 我是被定义在函数内部的函数哦!
     function innerFire() {
  console.log(this === window)
      }
     innerFire(); // 独立函数调用
}
fire(); // 输出true

函数 innerFire在二个外表函数fire里面申明且调用,那么它的this是指向什么人啊? 依然是window

洋美国人可能会忧虑于fire函数的作用域对innerFire的熏陶,但我们只要抓住我们的说理武器——未有分明性的调用对象的时候,将对函数的this使用私下认可绑定:绑定到全局的window对象,便可得准确的答案了

上面那一个抓好版的例证也是一样的输出true

JavaScript

var obj = { fire: function () { function innerFire() { console.log(this === window) } innerFire(); // 独立函数调用 } } obj.fire(); //输出 true

1
2
3
4
5
6
7
8
9
var obj = {
   fire: function () {
       function innerFire() {
          console.log(this === window)
        }
        innerFire();   // 独立函数调用
     }
}
obj.fire(); //输出 true

通晓JavaScript的原型属性,完结及应用。在意】在这么些事例中, obj.fire()的调用实际上利用到了this的隐式绑定,那就是底下作者要讲的内容,那个事例作者接下去还也许会三番五次上课

【总括】 所有事函数作为单身函数调用,无论它的位置在哪儿,它的行为表现,都和直接在全局遇到中调用无差异

设置

率先下载新的沙盘。其中囊括了我们在上三个科目中落成的代码和一个新的音效文件。

开辟main.js,最初敲吧。

转变原理

Base64的第一手数据源是二进制种类(Binary Sequence)。当然,你也可以将图片、文本和音摄像转变到二进制种类,再然后转移为Base64编码。大家那边斟酌的是什么将二进制调换为Base64编码,对于如何将图纸,文本和音录制调换为二进制连串敬请期望。

在转移前,先定义一张索引表,那张表规定了怎么转移。
云顶娱乐 3
转变的时候我们先将二进制种类分组,每6个比特为一组。可是只要编码的字节数不可能被3整除,那么最后就能够多出1个或四个字节,能够应用下边包车型地铁秘技实行拍卖:先使用0字节值在终极补足,使其可以被3整除,然后再进行base64的编码。在编码后的base64文本后拉长八个或多少个’=’号,代表补足的字节数。也等于说,当最终剩余一个伍位字节(贰个byte)时,最终贰个6位的base64字节块有四人是0值,最终附加上四个等号;如若最终剩余三个八位字节(2个byte)时,最终贰个6位的base字节块有两位是0值,最终附加二个等号。 仿效下表:
云顶娱乐 4

JavaScript 实现持续的言语特色

以下语言特征共同落到实处了 JavaScript 承袭。

  • 当尝试访谈 JavaScript 对象中官样文章的质量时,深入分析器会查找匹配的靶子原型。例如调用 car.toString()云顶娱乐,,如果 car 没有 toString 方法,就能够调用 car 对象的原型。 那几个查找进度会直接递归, 直到找出到特出的原型可能承继链尽头。
  • 调用  new Car() 会成立二个新的对象,并伊始化为 Car.prototype。 这样就同意为新指标设置原型链。供给小心的是,new Car() 只有当  Car 是函数时才有意义。 此类函数即所谓构造函数。
  • 调用对象的三个分子函数时, this 的值被绑定为当前目的。比如调用 "abc".toString()this 的值被设置为 "abc",然后调用 toString 函数。该本事扶助代码重用:同样的代码,可在 this 为种种分歧的值时调用。对象的成员函数,也被誉为对象的主意。

对象方法中的this

在模拟 call 方法的时候,大家选用了目的方法来改造 this 的针对。调用对象中的方法时,会把对象作为艺术的上下文情状来调用。

既然 this 是指向实行函数的上下文情状的,这我们先来切磋一下调用函数时的实行上下文景况。

上面小编门来造访调用对象方法时实行上下文是哪些的:

var foo = { x : 1, getX: function(){ console.log(this.x); } } foo.getX();

1
2
3
4
5
6
7
var foo = {
    x : 1,
    getX: function(){
        console.log(this.x);
    }
}
foo.getX();

云顶娱乐 5

从上航海用体育场合中,我们能够看来getX主意的调用者的上下文是foo,因此getX艺术中的 this 指向调用者上下文foo,转换成 call 方法为foo.getX.call(foo)

上边大家把其余函数的调用情势都按调用对象方法的思路来改变。

this的隐式绑定

【传说——线路2】 迪斯(this)穿越来异世界“伽瓦斯克利”(javascript)的时候,刚好身上带了有的钱,于是他找到多个酒店过夜了下来

云顶娱乐 6

当函数被一个指标“包括”的时候,大家称函数的this被隐式绑定到这么些指标里面了,这时候,通过this能够一直访谈所绑定的靶子里面的别的质量,比方上边包车型大巴a属性

JavaScript

var obj = { a: 1, fire: function () { console.log(this.a) } } obj.fire(); // 输出1

1
2
3
4
5
6
7
var obj = {
     a: 1,
      fire: function () {
           console.log(this.a)
        }
}
obj.fire(); // 输出1

到现在我们须要对经常通常的的代码操作做一些更加深的图谋,首先,下边包车型大巴这两段代码到达的功能是如出一辙的:

JavaScript

// 笔者是首先段代码 function fire () { console.log(this.a) } var obj = { a: 1, fire: fire } obj.fire(); // 输出1 // 小编是第二段代码 var obj = { a: 1, fire: function () { console.log(this.a) } } obj.fire(); // 输出1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 我是第一段代码
function fire () {
      console.log(this.a)
}
  
var obj = {
      a: 1,
      fire: fire
  }
obj.fire(); // 输出1
// 我是第二段代码
var obj = {
        a: 1,
        fire: function () {
             console.log(this.a)
         }
}
obj.fire(); // 输出1

fire函数并不会因为它被定义在obj对象的内部和外界而有任何差别,也正是说在上述隐式绑定的二种样式下,fire通过this还是能访谈到obj内的a属性,那告诉咱们:

1.  this是动态绑定的,只怕说是在代码运转期绑定并非在书写期

2.  函数于对象的独立性, this的传递错失难点

(下边包车型地铁陈说可能带有个人的真情实意侧向而显得不太严俊,但那是因为作者希望阅读者尽只怕地通晓自身想表明的情趣)

增进飞行动画

鸟类上下飞行的艺术太枯燥了,我们来加一些神效,让它看起来某个游戏的楷模。

1.下落时角度转动速度减慢,直到特定值。
2.上涨时翻转角度。

率先个任务很简短,大家只必要加多两行代码到update()方法。

JavaScript

if (this.bird.angle < 20) this.bird.angle += 1;

1
2
if (this.bird.angle &lt; 20)  
    this.bird.angle += 1;

其次步大家有四个选项,
回顾起见,大家能够只在jump()方法中增多

JavaScript

this.bird.angle = -20;

1
this.bird.angle = -20;

唯独那中角度的面目一新看起来有个别儿别扭。所以,我们还足以让角度有个调换的进程。大家能够用如下代码替换掉下边的。

JavaScript

// create an animation on the bird var animation = this.game.add.tween(this.bird); // Set the animation to change the angle of the sprite to -20° in 100 milliseconds animation.to({angle: -20}, 100); // And start the animation animation.start();

1
2
3
4
5
6
7
8
// create an animation on the bird
var animation = this.game.add.tween(this.bird);
 
// Set the animation to change the angle of the sprite to -20° in 100 milliseconds
animation.to({angle: -20}, 100);
 
// And start the animation
animation.start();

也得以揉成一行代码:

JavaScript

this.game.add.tween(this.bird).to({angle: -20}, 100).start();

1
this.game.add.tween(this.bird).to({angle: -20}, 100).start();

这样一来就大致了,即使你将来测量试验一下游玩,你会发觉鸟类的角度变化得并不自然。像左侧的图,然则大家想要的是右图的意义。

云顶娱乐 7

为了达成这么些目标,我们要做的是改动小鸟的主干(anchor)。在create()方法中加多如下代码来改动宗旨(anchor)。

JavaScript

this.bird.anchor.setTo(-0.2, 0.5);

1
this.bird.anchor.setTo(-0.2, 0.5);

现行反革命测验一下游戏你就能够开掘已经好得多了。

用JavaScript实现Base64

规律精晓了随后,完成起来就很轻便了。

JavaScript

define(function(require, exports, module) { var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表 /** * @author natumsol@gmail.com * @description 将二进制系列调换为Base64编码 * @param {String} * @return {String} */ function binToBase64(bitString) { var result = ""; var tail = bitString.length % 6; var bitStringTemp1 = bitString.substr(0, bitString.length - tail); var bitStringTemp2 = bitString.substr(bitString.length - tail, tail); for (var i = 0; i < bitStringTemp1.length; i += 6) { var index = parseInt(bitStringTemp1.substr(i, 6), 2); result += code[index]; } bitStringTemp2 += new Array(7 - tail).join("0"); if (tail) { result += code[parseInt(bitStringTemp2, 2)]; result += new Array((6 - tail) / 2

  • 1).join("="); } return result; } /** * @author natumsol@gmail.com * @description 将base64编码转变为二进制系列 * @param {String} * @return {String} */ function base64ToBin(str) { var bitString = ""; var tail = 0; for (var i = 0; i < str.length; i++) { if (str[i] != "=") { var decode = code.indexOf(str[i]).toString(2); bitString += (new Array(7 - decode.length)).join("0") + decode; } else { tail++; } } return bitString.substr(0, bitString.length - tail * 2); } /** * @description 将字符转换为二进制种类 * @param {String} str * @return {String} */ function stringToBin(str) { var result = ""; for (var i = 0; i < str.length; i++) { var charCode = str.charCodeAt(i).toString(2); result += (new Array(9 - charCode.length).join("0") + charCode); } return result; } /** * @description 将二进制系列调换为字符串 * @param {String} Bin */ function BinToStr(Bin) { var result = ""; for (var i = 0; i < Bin.length; i += 8) { result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2)); } return result; } exports.base64 = function(str) { return binToBase64(stringToBin(str)); } exports.decodeBase64 = function(str) { return BinToStr(base64ToBin(str)); } })
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
define(function(require, exports, module) {
 
    var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(""); //索引表
 
    /**
     * @author natumsol@gmail.com
     * @description 将二进制序列转换为Base64编码
     * @param  {String}
     * @return {String}
     */
    function binToBase64(bitString) {
        var result = "";
        var tail = bitString.length % 6;
        var bitStringTemp1 = bitString.substr(0, bitString.length - tail);
        var bitStringTemp2 = bitString.substr(bitString.length - tail, tail);
        for (var i = 0; i &lt; bitStringTemp1.length; i += 6) {
            var index = parseInt(bitStringTemp1.substr(i, 6), 2);
            result += code[index];
        }
        bitStringTemp2 += new Array(7 - tail).join("0");
        if (tail) {
            result += code[parseInt(bitStringTemp2, 2)];
            result += new Array((6 - tail) / 2 + 1).join("=");
        }
        return result;
    }
 
    /**
     * @author natumsol@gmail.com
     * @description 将base64编码转换为二进制序列
     * @param  {String}
     * @return {String}
     */
    function base64ToBin(str) {
        var bitString = "";
        var tail = 0;
        for (var i = 0; i &lt; str.length; i++) {
            if (str[i] != "=") {
                var decode = code.indexOf(str[i]).toString(2);
                bitString += (new Array(7 - decode.length)).join("0") + decode;
            } else {
                tail++;
            }
        }
        return bitString.substr(0, bitString.length - tail * 2);
    }
 
    /**
     * @description 将字符转换为二进制序列
     * @param  {String} str
     * @return {String}    
     */
    function stringToBin(str) {
        var result = "";
        for (var i = 0; i &lt; str.length; i++) {
            var charCode = str.charCodeAt(i).toString(2);
            result += (new Array(9 - charCode.length).join("0") + charCode);
        }
        return result;
    }
    /**
     * @description 将二进制序列转换为字符串
     * @param {String} Bin
     */
    function BinToStr(Bin) {
        var result = "";
        for (var i = 0; i &lt; Bin.length; i += 8) {
            result += String.fromCharCode(parseInt(Bin.substr(i, 8), 2));
        }
        return result;
    }
    exports.base64 = function(str) {
        return binToBase64(stringToBin(str));
    }
    exports.decodeBase64 = function(str) {
        return BinToStr(base64ToBin(str));
    }
})

编辑:云顶娱乐 本文来源:通晓JavaScript的原型属性,完结及应用

关键词:

  • 上一篇:没有了
  • 下一篇:没有了