javascript带回调函数的异步脚本载入方法实例分析

本文实例陈诉了javascript带回调函数的异步脚本载入方法。分享给大家供大家参照他事他说加以考察。具体落到实处方式如下:

相信广大人都很嫌疑于javascript的原型系统,,在本身刚初阶接触javascript的原型系统的时候,笔者也不行纳闷于它的结构,因为小编无与比伦接触过这种基于原型的言语。javascript是多少个依照原型的语言,就算是以函数为第一等百姓的言语,但也足以完成面向对象,那便是依照它的原型系统。

var Loader = function () { }
Loader.prototype = {
  require: function (scripts, callback) {
    this.loadCount   = 0;
    this.totalRequired = scripts.length;
    this.callback    = callback;
    for (var i = 0; i < scripts.length; i++) {
      this.writeScript(scripts[i]);
    }
  },
  loaded: function (evt) {
    this.loadCount++;
    if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
  },
  writeScript: function (src) {
    var self = this;
    var s = document.createElement('script');
    s.type = "text/javascript";
    s.async = true;
    s.src = src;
    s.addEventListener('load', function (e) { self.loaded(e); }, false);
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(s);
  }
}

javascript原型之函数

于今大家来写二个函数

function A(){

}

那是二个情节为空的函数,但它的确内容为空吗?让大家来看下面一段代码

function A(){

}

console.log(A.toString());;//输出为function A() {}

大家了然,javascript里面包车型地铁一切都以对象,函数也是,既然函数是目的那么就能够调用函数对象的秘技,所以自身试着调用了toString
方法,它输出了二个字符串,证明toString方法是存在的。那么toString
方法到底是存在在那边吗,不设有于函数体里,那么存在一个地点必定有toString的函数体且对象function
A以某种形式得到了toString方法的调用权。。。

本身百度了刹那间遵照原型的语言的性状,基于原型的言语,必然有四个或着五个最初的靶子,然后以往的靶子都以由那一个早先时代对象克隆过来的,也正是说,基于原型的语言中指标的成形是依靠留存的靶子来复制的。

好,那大家开端下一步的推行

function A(){

}
console.log(A.__proto__);//Function
console.log(A.prototype);//{}

自己出口了Javascript对象所持有的多个个性,那是javascript语言规定的多个属性_proto_属性指向对象构造函数的原型(不是很明亮),prototype属性指向对象的原型。从结果看A函数构造函数的原型是Function,A函数本身的原型是{
}(同样不是很理解)

于是本人又做了上边那个实验

Function.prototype.getName = function(){
    return "FunctionTest";
}

function A(){

}
console.log(A.__proto__ === Function.prototype);//true
console.log(A.getName());//FunctionTest

function B(){

}
console.log(B.__proto__ === Function.prototype);//true
console.log(B.getName());//FunctionTest

console.log(A.__proto__ === A.constructor.prototype);//true
//即函数作为对象它的构造函数为Function

作者从另外的地点得知javascript里面有内建的Function和Object对象,于是自身想着Function对象是否和function
A
某些关联呢,当自家见状第一条console.log语句重回true的时候,笔者精晓小编是不容争辩的,于是我扩张了Function.prototype
给内部增加了getName方法,然后自个儿在用函数A调用了那些措施重回FunctionTest,小编又新建了函数B,也调用了那些艺术,重返FunctionTest。

由来笔者精通了函数_proto属性的对准,指向其构造函数的原型,当指标A调用getName函数的时候,由于A对象未有getName函数,javascript会招来目的A的_proto**属性所对应对象,有则调用,未有则继续进步找。

函数的prototype属性小编一开始向来未曾找到与之相应的目的

console.log(A.prototype === Function.__proto__);//false
console.log(A.prototype === Function.prototype);//false
console.log(A.prototype === Object.__proto__);//false
console.log(A.prototype === Object.prototype);//false

新生本人换了一种沉思方式究竟找到了

console.log(A.prototype.__proto__ === Object.prototype);//true
console.log(A.prototype.prototype);//undefined

而之后小编又尝试了

console.log(Function.prototype.__proto__ === Object.prototype);

所以最后具备的凡事对象的内置函数比方toString都以在Object.prototype里的

下一场自身又有一个可疑
装有一切函数对象的松开函数比方call,apply都是Function.prototype里的,能够很容易的就表达,普通对象是不能调用call,apply的。

用法演示

javascript原型之对象

自己尝试了之类的代码

function A(){
    this.getText = function(){
        return "Text";
    }
}

A.prototype.getName = function(){
    return "my god";
}

var i = new A();

console.log(i.getText());//Text
console.log(i.getName());//my god

然后作者改了一晃程序

function A(){
    this.getName = function(){
      return "Text";
    }
}

A.prototype.getName = function(){
    return "my god";
}

var i = new A();

console.log(i.getName());//Text
console.log(i.__proto__ === A.prototype);//true
console.log(i.prototype);//undefined

欧洲杯买球下注盘口 ,由地点的尝试能够,由函数A作为构造函数,所克隆出来的平时对象i的_proto_性情指向函数A的原型(也正是prototype属性),且平常对象i的prototype属性是绝非概念的。

当i调用getName函数时,由于i是由函数A克隆出来(我们还没忘记原型语言的性状呢,就是新的靶子是由另二个已存在的靶子克隆的)的,里面只用getText函数未有getName函数,于是javascript就能够搜索i的_proto_属性,而i的proto属性所指向的实际就是A.prototype,所以javascript就在A.prototype里面找getName函数,找到了就调用。所以第二段代码中开始时期调用再次来到Text的老大getName函数。

javascript里面还或然有一种对象正是目的字面量,对象字面量的是否有所Function.prototype只怕Object.prototype的函数呢
请看实验

var a = {
    getName:function(){
        return "a";
    }
}
console.log(a.__proto__);//{}
console.log(a.prototype);//undefined

console.log(a.__proto__ === Object.prototype);//true

是因为指标字面量不是由函数对象克隆的,所以并没有Function.prototype里面包车型客车措施,因为a._proto_针对的是Object.prototype,那就表达javascript只能在a自个儿和Object.prototype里面找调用的函数。

var l = new Loader();
l.require([
  "example-script-1.js",
  "example-script-2.js"],
  function() {
    // Callback
    console.log('All Scripts Loaded');
  });

总结

由地点以部分内容我们能够得出:

1.javascript函数调用顺序是找寻对象的原型(即,对象的_proto_属性),一层一层的往上找,直到遇见该函数或然undefined才结束。

2.函数看作特殊的目的,它的原型是Function.prototype,能够调用Function.prototype里面包车型大巴秘籍,而Function.prototype的原型又是Object.prototype,故而函数对象不只能调用Function.prototype里面包车型地铁措施,仍是能够调用Object.prototype里面包车型客车措施,那就说函数对象正是“函数”又是指标。

3.平时对象的原型是其构造函数的原型(即,A.prototype),而A.prototype的原型是Object.prototype,所以,普通对象只好调用它自个儿和Object.prototype内的函数

4.对象字面量的原型是Object.prototype。

但愿本文所述对我们的javascript程序设计具有帮忙。

您大概感兴趣的小说:

  • javascript写的异步加载js文件函数(协助数组传参)
  • 谈谈JavaScript异步函数发展历程

相关文章