xml地图|网站地图|网站标签 [设为首页] [加入收藏]

到底是干什么的

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:163 发布时间:2019-05-02
摘要:注意 constructor 属性 new操作为了记录「一时半刻对象是由哪个函数创制的」,所以预先给「士兵.prototype」加了三个constructor 属性: JavaScript 士兵.prototype = { constructor: 士兵 } 1 2 3 士兵.p

注意 constructor 属性

new 操作为了记录「一时半刻对象是由哪个函数创制的」,所以预先给「士兵.prototype」加了三个constructor 属性:

JavaScript

士兵.prototype = { constructor: 士兵 }

1
2
3
士兵.prototype = {
  constructor: 士兵
}

纵然您重新对「士兵.prototype」赋值,那么这么些 constructor 属性就没了,所以您应该那样写:

JavaScript

士兵.prototype.兵种 = "U.S.A.战士" 士兵.prototype.攻击力 = 5士兵.prototype.行走 = function(){ /*走俩步的代码*/} 士兵.prototype.奔跑 = function(){ /*狂奔的代码*/ } 士兵.prototype.死亡 = function(){ /*Go die*/ } 士兵.prototype.攻击 = function(){ /*糊他熊脸*/ } 士兵.prototype.防御 = function(){ /*护脸*/ }

1
2
3
4
5
6
7
士兵.prototype.兵种 = "美国大兵"
士兵.prototype.攻击力 = 5
士兵.prototype.行走 = function(){ /*走俩步的代码*/}
士兵.prototype.奔跑 = function(){ /*狂奔的代码*/  }
士兵.prototype.死亡 = function(){ /*Go die*/    }
士兵.prototype.攻击 = function(){ /*糊他熊脸*/   }
士兵.prototype.防御 = function(){ /*护脸*/       }

恐怕您也能够友善给 constructor 重新赋值:

JavaScript

士兵.prototype = { constructor: 士兵, 兵种:"U.S.A.老将", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } }

1
2
3
4
5
6
7
8
9
10
士兵.prototype = {
  constructor: 士兵,
  兵种:"美国大兵",
  攻击力:5,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}

完。

2 赞 6 收藏 4 评论

图片 1

person2 instanceof Person; //true;

    method: function() {}

质疑

上面包车型地铁代码存在3个主题材料:浪费了广大内部存款和储蓄器。

  1. 走路、奔跑、离世、攻击、防备那四个动作对于每一个士兵其实是同样的,只必要各自引用同1个函数就能够了,没须要重复成立拾0 个步履、91八个奔跑……
  2. 那些新兵的兵种和攻击力都以千篇一律的,没要求创制 十0 次。
  3. 只有 ID 和生命值须求成立 十0 次,因为种种士兵有投机的 ID 和生命值。

 

    this.value = 42;

制作玖1七个战士

一旦要求创制 拾0 个战士如何是好吧?

循环 100 次吧:

JavaScript

var 士兵们 = [] var 士兵 for(var i=0; i<100; i ){ 士兵 = { ID: i, // ID 无法再度 兵种:"United States士兵", 攻击力:5, 生命值:4二, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 士兵们.push(士兵) } 兵营.批量成立(士兵们)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 士兵们 = []
var 士兵
for(var i=0; i<100; i ){
  士兵 = {
    ID: i, // ID 不能重复
    兵种:"美国大兵",
    攻击力:5,
    生命值:42,
    行走:function(){ /*走俩步的代码*/},
    奔跑:function(){ /*狂奔的代码*/  },
    死亡:function(){ /*Go die*/    },
    攻击:function(){ /*糊他熊脸*/   },
    防御:function(){ /*护脸*/       }
  }
  士兵们.push(士兵)
}
 
兵营.批量制造(士兵们)

嘿哎好不难。

 

// 设置Bar的prototype属性为Foo的实例对象

JS 之父的关怀

JS 之父创制了 new 关键字,能够让大家少写几行代码:

图片 2

假定你在兵员前边使用 new 关键字,那么能够少做肆件事情:

  1. 并非创设一时对象,因为 new 会帮你做(您选取「this」就足以访问到一时对象);
  2. 不要绑定原型,因为 new 会帮您做(new 为了知道原型在哪,所以钦点原型的名为 prototype);
  3. 毫无 return 目前对象,因为 new 会帮你做;
  4. 永不给原型想名字了,因为 new 钦命名称叫 prototype。

  return new Child();

var foo  = {};

优雅?

有人建议创立一个战士的代码分散在八个地方很不优雅,于是大家用1个函数把那两部分关联起来:

JavaScript

function 士兵(ID){ var 一时半刻对象 = {} 一时半刻对象.__proto__ = 士兵.原型 权且对象.ID = ID 权且对象.生命值 = 42 return 权且对象 } 士兵.原型 = { 兵种:"美国新秀", 攻击力:伍, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } // 保存为文件:士兵.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function 士兵(ID){
  var 临时对象 = {}
 
  临时对象.__proto__ = 士兵.原型
 
  临时对象.ID = ID
  临时对象.生命值 = 42
  
  return 临时对象
}
 
士兵.原型 = {
  兵种:"美国大兵",
  攻击力:5,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}
 
// 保存为文件:士兵.js

下一场就能够心旷神怡地引用「士兵」来创立士兵了:

JavaScript

var 士兵们 = [] for(var i=0; i<拾0; i ){ 士兵们.push(士兵(i)) } 兵营.批量创立(士兵们)

1
2
3
4
5
6
var 士兵们 = []
for(var i=0; i<100; i ){
  士兵们.push(士兵(i))
}
 
兵营.批量制造(士兵们)

}

function Bar() {}

JS 的 new 到底是为什么的?

2017/04/10 · JavaScript · 4 评论 · new

初稿出处: 方应杭   

大多数讲 new 的篇章会从面向对象的思绪讲起,可是本身始终以为,在疏解一个事物的时候,不应有引进另二个更盘根错节的东西。

明天自身从「省代码」的角度来说 new。

—————————

想象大家在炮制三个政策类战斗游戏,游戏者能够操作一群士兵攻击敌方。

咱俩最首要来切磋一下那么些娱乐里面包车型地铁「创立士兵」环节。

二个老马的在管理器里正是一群属性,如下图:

图片 3

作者们只要求那样就足以创建三个战争员:

JavaScript

var 士兵 = { ID: 1, // 用于区分每一种士兵 兵种:"U.S.立小学将", 攻击力:伍, 生命值:4二, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 兵营.制造(士兵)

1
2
3
4
5
6
7
8
9
10
11
12
13
var 士兵 = {
  ID: 1, // 用于区分每个士兵
  兵种:"美国大兵",
  攻击力:5,
  生命值:42,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}
 
兵营.制造(士兵)

 

test [Bar的实例]

改进

看过我们的专辑从前小说(JS 原型链)的同窗断定晓得,用原型链能够减轻重复创设的主题材料:我们先创立1个「士兵原型」,然后让「士兵」的 __proto__ 指向「士兵原型」

JavaScript

var 士兵原型 = { 兵种:"美利哥民代表大会兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } var 士兵们 = [] var 士兵 for(var i=0; i<100; i ){ 士兵 = { ID: i, // ID 无法重新 生命值:4二 } /*事实上海工业作中不用这样写,因为 __proto__ 不是职业属性*/ 士兵.__proto__ = 士兵原型 士兵们.push(士兵) } 兵营.批量创制(士兵们)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var 士兵原型 = {
  兵种:"美国大兵",
  攻击力:5,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}
var 士兵们 = []
var 士兵
for(var i=0; i<100; i ){
  士兵 = {
    ID: i, // ID 不能重复
    生命值:42
  }
 
  /*实际工作中不要这样写,因为 __proto__ 不是标准属性*/
  士兵.__proto__ = 士兵原型
 
  士兵们.push(士兵)
}
 
兵营.批量制造(士兵们)

  Child.prototype.constructor = Child;

alert(b.x); // undefined

那2次大家用 new 来写

JavaScript

function 士兵(ID){ this.ID = ID this.生命值 = 4二 } 士兵.prototype = { 兵种:"美利坚联邦合众国立小学将", 攻击力:伍, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } // 保存为文件:士兵.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function 士兵(ID){
  this.ID = ID
  this.生命值 = 42
}
 
士兵.prototype = {
  兵种:"美国大兵",
  攻击力:5,
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    },
  攻击:function(){ /*糊他熊脸*/   },
  防御:function(){ /*护脸*/       }
}
 
// 保存为文件:士兵.js

下一场是创办士兵(加了三个 new 关键字):

JavaScript

var 士兵们 = [] for(var i=0; i<100; i ){ 士兵们.push(new 士兵(i)) } 兵营.批量创建(士兵们)

1
2
3
4
5
6
var 士兵们 = []
for(var i=0; i<100; i ){
  士兵们.push(new 士兵(i))
}
 
兵营.批量制造(士兵们)

new 的机能,正是省那么几行代码。(也正是所谓的语法糖)

Teacher.prototype.constructor = Teacher;

foo.__proto__ = Object.prototype;

此刻,我们通过将Teacher的prototype原型对象指向Person的实例来产生了Teacher对Person的持续。能够看到Teacher的实例teacher具备了Person的属性和方法。

// 但a对象的原型依旧能够获得原来的结果

 

         回到核心上,但大家利用new Foo()创制出贰个示范那进程中它做了写什么事啊?

 

alert(a.x); // 10 - 从原型上取得

 

 

 

     this.name = name; 

person1 instanceof Person; //true;

            {method: ...};

 

Bar.prototype.foo = 'Hello World';

在面向对象语言中,经常经过定义类然后再拓展实例化来创设三个具备一样属性和办法的目标。但是在JavaScript中并不曾类的定义,可是ECMAScript中的构造函数能够用来创建特定项目的对象。因此,在JavaScript中得以成立自定义的构造函数,并且通过new操作符来成立对象。

其次,正如大家地点提到的,假设在目的开端化的时候,[[Call]]回去的是目的,那刚刚是用来全部new操作符的结果

 

这就是说,有类了就必将存在着持续,而js的存在延续跟传统的类承接模型差别,它是利用 prototype 原型模型。那日常被视作是 JavaScript 的后天不足被提及,其实基于原型的接续模型比守旧的类承继还要庞大。 完毕古板的类承继模型是异常粗略,可是得以实现js中的原型承继则要艰苦的多。JavaScript 使用原型链的后续形式。我们来看下那几个事例。

function Person(name, gender) {

        { foo: 'Hello World' }

 

在别的语言中,new操作符都以用来实例化创制一个目的的,JavaScript 中同样如此,可是它又有1部分不1。为了说知道那些标题大家先来看一下JavaScript 中的类、原型、原型链、承继这么些概念呢。

   this.say = function() {

 

 

复制代码

var person1 = new Person("Mike", "male");

            Object.prototype

var person2 = new Person("Kate", "female");

// 修正Bar.prototype.constructor为Bar本身

 

中一样如此,不过它又有局地不等。为了说精通那个标题我们先来看一下...

 

Object.call(foo); 

...

                {toString: ... /* etc. */};

Teacher.prototype = new Person();

JavaScript 中从未观念类的定义,它的类便是二个措施,也正是说JavaScript 中是由此function来定义类的。举个例子大家能够那样子来定义1个类。

var person2 = new Person("Kate", "female");

 

 

var b = new B();

 

  

复制代码

// 如果"B"构造函数没有回来(或回到this)

 

alert(a.x); // 拾 – 从原型上获得

    console.log("Hello");

// 原型链

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:到底是干什么的

关键词: 68399皇家赌场 JavaScript

上一篇:js中常见面试问题,作用域链和闭包

下一篇:没有了

最火资讯