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

【皇家娱乐平台】再谈javascript原型继承,深入之

来源:http://www.ccidsi.com 作者:集成经验 人气:81 发布时间:2019-05-02
摘要:JavaScript 深入之继续的有余主意和优缺点 2017/05/28 · JavaScript· 继承 初稿出处: 冴羽    JavaScript 深入之成立对象的有余格局以及优缺点 2017/05/28 · JavaScript· 对象 原来的书文出处: 冴

JavaScript 深入之继续的有余主意和优缺点

2017/05/28 · JavaScript · 继承

初稿出处: 冴羽   

JavaScript 深入之成立对象的有余格局以及优缺点

2017/05/28 · JavaScript · 对象

原来的书文出处: 冴羽   

的确意义上的话Javascript并不是①门面向对象的言语,未有提供守旧的一而再格局,不过它提供了1种原型承袭的主意,利用自己提供的原型属性来落到实处持续。

写在日前

正文讲授JavaScript各类承接格局和优缺点。

而是注意:

那篇文章更像是笔记,哎,再让自己感慨一句:《JavaScript高端程序设计》写得真是太好了!

写在前方

这篇文章解说创立对象的各样艺术,以及优缺点。

可是注意:

那篇文章更像是笔记,因为《JavaScript高等程序设计》写得真是太好了!

原型与原型链

一.原型链承袭

function Parent () { this.name = 'kevin'; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName()) // kevin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Parent () {
    this.name = 'kevin';
}
 
Parent.prototype.getName = function () {
    console.log(this.name);
}
 
function Child () {
 
}
 
Child.prototype = new Parent();
 
var child1 = new Child();
 
console.log(child1.getName()) // kevin

问题:

一.引用类型的习性被抱有实例共享,举个例证:

function Parent () { this.names = ['kevin', 'daisy']; } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); child1.names.push('yayu'); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy", "yayu"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Parent () {
    this.names = ['kevin', 'daisy'];
}
 
function Child () {
 
}
 
Child.prototype = new Parent();
 
var child1 = new Child();
 
child1.names.push('yayu');
 
console.log(child1.names); // ["kevin", "daisy", "yayu"]
 
var child2 = new Child();
 
console.log(child2.names); // ["kevin", "daisy", "yayu"]

2.在成立 Child 的实例时,无法向Parent传参

一. 工厂情势

function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson('kevin');

1
2
3
4
5
6
7
8
9
10
11
function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
 
    return o;
}
 
var person1 = createPerson('kevin');

缺陷:对象不能辨认,因为兼具的实例都指向二个原型

说原型承袭在此之前依然要先说说原型和原型链,终归那是贯彻原型承继的根基。
在Javascript中,种种函数都有一个原型属性prototype指向自身的原型,而由那几个函数成立的目的也有3个__proto__质量指向那几个原型,而函数的原型是二个目的,所以那些目的也会有2个__proto__本着本身的原型,那样逐层深切直到Object对象的原型,那样就产生了原型链。下边这张图很好的疏解了Javascript中的原型和原型链的涉及。

二.借出构造函数(优异延续)

function Parent () { this.names = ['kevin', 'daisy']; } function Child () { Parent.call(this); } var child1 = new Child(); child1.names.push('yayu'); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Parent () {
    this.names = ['kevin', 'daisy'];
}
 
function Child () {
    Parent.call(this);
}
 
var child1 = new Child();
 
child1.names.push('yayu');
 
console.log(child1.names); // ["kevin", "daisy", "yayu"]
 
var child2 = new Child();
 
console.log(child2.names); // ["kevin", "daisy"]

优点:

1.防止了引用类型的性质被有着实例共享

2.可以在 Child 中向 Parent 传参

比方:

function Parent (name) { this.name = name; } function Child (name) { Parent.call(this, name); } var child1 = new Child('kevin'); console.log(child1.name); // kevin var child2 = new Child('daisy'); console.log(child2.name); // daisy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Parent (name) {
    this.name = name;
}
 
function Child (name) {
    Parent.call(this, name);
}
 
var child1 = new Child('kevin');
 
console.log(child1.name); // kevin
 
var child2 = new Child('daisy');
 
console.log(child2.name); // daisy

缺点:

主意都在构造函数中定义,每便创制实例都会创立三次方法。

二. 构造函数方式

function Person(name) { this.name = name; this.getName = function () { console.log(this.name); }; } var person1 = new Person('kevin');

1
2
3
4
5
6
7
8
function Person(name) {
    this.name = name;
    this.getName = function () {
        console.log(this.name);
    };
}
 
var person1 = new Person('kevin');

可取:实例能够辨感觉三个一定的档次

缺陷:每便创立实例时,每个方法都要被创建二回

皇家娱乐平台 1

三.结缘传承

原型链承接和杰出连续双剑合璧。

function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child('kevin', '18'); child1.colors.push('black'); console.log(child1.name); // kevin console.log(child1.age); // 18 console.log(child1.colors); // ["red", "blue", "green", "black"] var child2 = new Child('daisy', '20'); console.log(child2.name); // daisy console.log(child2.age); // 20 console.log(child2.colors); // ["red", "blue", "green"]

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
function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
 
Parent.prototype.getName = function () {
    console.log(this.name)
}
 
function Child (name, age) {
 
    Parent.call(this, name);
    
    this.age = age;
 
}
 
Child.prototype = new Parent();
 
var child1 = new Child('kevin', '18');
 
child1.colors.push('black');
 
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]
 
var child2 = new Child('daisy', '20');
 
console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

亮点:融入原型链承袭和构造函数的长处,是 JavaScript 中最常用的延续格局。

2.壹 构造函数方式优化

function Person(name) { this.name = name; this.getName = getName; } function getName() { console.log(this.name); } var person1 = new Person('kevin');

1
2
3
4
5
6
7
8
9
10
function Person(name) {
    this.name = name;
    this.getName = getName;
}
 
function getName() {
    console.log(this.name);
}
 
var person1 = new Person('kevin');

亮点:化解了每个方法都要被重新成立的主题素材

症结:那叫什么封装……

各种函数都以Function函数创制的靶子,所以种种函数也有三个__proto__品质指向Function函数的原型。这里要求提出的是,真正形成原型链的是每一个对象的__proto__性子,而不是函数的prototype属性,那是很主要的。

4.原型式承袭

function createObj(o) { function F(){} F.prototype = o; return new F(); }

1
2
3
4
5
function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

尽管 ES伍 Object.create 的效仿落成,将盛传的对象作为创建的对象的原型。

缺点:

带有引用类型的属性值始终都会共享相应的值,这一点跟原型链承袭同样。

var person = { name: 'kevin', friends: ['daisy', 'kelly'] } var person1 = createObj(person); var person2 = createObj(person); person1.name = 'person1'; console.log(person2.name); // kevin person1.firends.push('taylor'); console.log(person2.friends); // ["daisy", "kelly", "taylor"]

1
2
3
4
5
6
7
8
9
10
11
12
13
var person = {
    name: 'kevin',
    friends: ['daisy', 'kelly']
}
 
var person1 = createObj(person);
var person2 = createObj(person);
 
person1.name = 'person1';
console.log(person2.name); // kevin
 
person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

注意:修改person1.name的值,person2.name的值并未有发生改换,并不是因为person1person2有独立的 name 值,而是因为person1.name = 'person1',给person1增添了 name 值,并非修改了原型上的 name 值。

三. 原型格局

function Person(name) { } Person.prototype.name = 'keivn'; Person.prototype.getName = function () { console.log(this.name); }; var person1 = new Person();

1
2
3
4
5
6
7
8
9
10
function Person(name) {
 
}
 
Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
    console.log(this.name);
};
 
var person1 = new Person();

优点:方法不会再也创制

缺点:1. 独具的性能和办法都共享 2. 不可能初步化参数

原型承袭

5. 寄生式承袭

创造一个仅用于封装承接进程的函数,该函数在里头以某种方式来做拉长对象,最终回到对象。

function createObj (o) { var clone = object.create(o); clone.sayName = function () { console.log('hi'); } return clone; }

1
2
3
4
5
6
7
function createObj (o) {
    var clone = object.create(o);
    clone.sayName = function () {
        console.log('hi');
    }
    return clone;
}

缺点:跟借用构造函数格局同样,每一回创设对象都会创立一次方法。

3.1 原型形式优化

function Person(name) { } Person.prototype = { name: 'kevin', getName: function () { console.log(this.name); } }; var person1 = new Person();

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name) {
 
}
 
Person.prototype = {
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};
 
var person1 = new Person();

亮点:封装性好了几许

缺陷:重写了原型,丢失了constructor属性

基本形式

陆. 寄生组合式承接

为了方便大家阅读,在此间再一次一下结合继承的代码:

function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child('kevin', '18'); console.log(child1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
 
Parent.prototype.getName = function () {
    console.log(this.name)
}
 
function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}
 
Child.prototype = new Parent();
 
var child1 = new Child('kevin', '18');
 
console.log(child1)

构成承继最大的瑕疵是会调用三次父构造函数。

叁次是设置子类型实例的原型的时候:

Child.prototype = new Parent();

1
Child.prototype = new Parent();

二回在创立子类型实例的时候:

var child1 = new Child('kevin', '18');

1
var child1 = new Child('kevin', '18');

遥想下 new 的效仿落成,其实在那句中,大家会实施:

Parent.call(this, name);

1
Parent.call(this, name);

在此间,大家又会调用了叁次 Parent 构造函数。

从而,在那个事例中,假如大家打字与印刷 child一 目的,我们会发觉 Child.prototype 和 child壹 都有叁个属性为colors,属性值为['red', 'blue', 'green']

那么大家该怎么立异,防止那2遍重复调用呢?

若果大家不使用 Child.prototype = new Parent() ,而是直接的让 Child.prototype 访问到 Parent.prototype 呢?

看望哪些落成:

function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } // 关键的三步 var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); var child一 = new Child('kevin', '18'); console.log(child一);

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
function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
 
Parent.prototype.getName = function () {
    console.log(this.name)
}
 
function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}
 
// 关键的三步
var F = function () {};
 
F.prototype = Parent.prototype;
 
Child.prototype = new F();
 
 
var child1 = new Child('kevin', '18');
 
console.log(child1);

末尾我们封装一下以此连续方法:

function object(o) { function F() {} F.prototype = o; return new F(); } function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype; } // 当大家运用的时候: prototype(Child, Parent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
 
function prototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}
 
// 当我们使用的时候:
prototype(Child, Parent);

引用《JavaScript高档程序设计》中对寄生组合式承继的表彰便是:

那种艺术的高效用显示它只调用了一遍 Parent 构造函数,并且为此制止了在 Parent.prototype 下边创立不须求的、多余的习性。与此同时,原型链还能够维持不改变;因而,仍是可以够符合规律使用 instanceof 和 isPrototypeOf。开辟人员广泛以为寄生组合式承继是援引类型最精良的接模范式。

3.二 原型情势优化

function Person(name) { } Person.prototype = { constructor: Person, name: 'kevin', getName: function () { console.log(this.name); } }; var person1 = new Person();

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name) {
 
}
 
Person.prototype = {
    constructor: Person,
    name: 'kevin',
    getName: function () {
        console.log(this.name);
    }
};
 
var person1 = new Person();

可取:实例能够经过constructor属性找到所属构造函数

缺点:原型格局该有的后天不足还是有

复制代码 代码如下:

深深种类

JavaScript深切连串目录地址:。

JavaScript深远连串猜度写105篇左右,目的在于帮大家捋顺JavaScript底层知识,珍视解说如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难题概念。

比方有错误也许相当大心的地方,请务必给予指正,十一分感激。如若喜欢依然有所启发,应接star,对笔者也是一种鞭策。

  1. JavaScirpt 深刻之从原型到原型链
  2. JavaScript 浓厚之词法功用域和动态成效域
  3. JavaScript 深远之试行上下文栈
  4. JavaScript 深刻之变量对象
  5. JavaScript 深刻之功能域链
  6. JavaScript 深远之从 ECMAScript 标准解读 this
  7. JavaScript 深刻之实施上下文
  8. JavaScript 深切之闭包
  9. JavaScript 浓密之参数按值传递
  10. JavaScript 深刻之call和apply的模拟落成
  11. JavaScript 深远之bind的模仿完毕
  12. JavaScript 深入之new的模拟达成
  13. JavaScript 长远之类数组对象与 arguments
  14. JavaScript 深切之创设对象的种种办法以及优缺点

    1 赞 3 收藏 评论

皇家娱乐平台 2

4. 组合形式

构造函数方式与原型方式双剑合璧。

function Person(name) { this.name = name; } Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } }; var person1 = new Person();

1
2
3
4
5
6
7
8
9
10
11
12
function Person(name) {
    this.name = name;
}
 
Person.prototype = {
    constructor: Person,
    getName: function () {
        console.log(this.name);
    }
};
 
var person1 = new Person();

可取:该共享的共享,该民用的私家,使用最常见的方法

症结:有的人正是指望全数都写在共同,即更加好的封装性

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

四.壹 动态原型格局

function Person(name) { this.name = name; if (typeof this.getName != "function") { Person.prototype.getName = function () { console.log(this.name); } } } var person1 = new Person();

1
2
3
4
5
6
7
8
9
10
function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype.getName = function () {
            console.log(this.name);
        }
    }
}
 
var person1 = new Person();

只顾:使用动态原型形式时,不能够用对象字面量重写原型

演说下怎么:

function Person(name) { this.name = name; if (typeof this.getName != "function") { Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } } } } var person1 = new Person('kevin'); var person二 = new Person('daisy'); // 报错 并不曾该措施 person一.getName(); // 注释掉下边包车型地铁代码,那句是足以实践的。 person2.getName();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
    }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
// 报错 并没有该方法
person1.getName();
 
// 注释掉上面的代码,这句是可以执行的。
person2.getName();

为理解释那几个标题,假如开端实行var person1 = new Person('kevin')

皇家娱乐平台 ,1旦对 new 和 apply 的平底实行进度不是很熟识,能够阅读尾巴部分相关链接中的小说。

咱俩想起下 new 的得以达成步骤:

  1. 率先新建3个对象
  2. 下一场将目的的原型指向 Person.prototype
  3. 然后 Person.apply(obj)
  4. 再次来到那个目标

小心今年,回看下 apply 的落实步骤,会实行 obj.Person 方法,这一年就能举行 if 语句里的剧情,注意构造函数的 prototype 属性指向了实例的原型,使用字面量格局间接覆盖 Person.prototype,并不会更改实例的原型的值,person壹师心自用是指向了此前的原型,而不是 Person.prototype。而在此之前的原型是未曾 getName 方法的,所以就报错了!

倘使您就算想用字面量格局写代码,可以尝试下这种:

function Person(name) { this.name = name; if (typeof this.getName != "function") { Person.prototype = { constructor: Person, getName: function () { console.log(this.name); } } return new Person(name); } } var person1 = new Person('kevin'); var person2 = new Person('daisy'); person1.getName(); // kevin person2.getName(); // daisy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name) {
    this.name = name;
    if (typeof this.getName != "function") {
        Person.prototype = {
            constructor: Person,
            getName: function () {
                console.log(this.name);
            }
        }
 
        return new Person(name);
    }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
person1.getName(); // kevin
person2.getName();  // daisy

var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;

五.1 寄生构造函数形式

function Person(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = new Person('kevin'); console.log(person1 instanceof Person) // false console.log(person1 instanceof Object) // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name) {
 
    var o = new Object();
    o.name = name;
    o.getName = function () {
        console.log(this.name);
    };
 
    return o;
 
}
 
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object)  // true

寄生构造函数方式,笔者个人以为应当那样读:

寄生-构造函数-方式,也等于说寄生在构造函数的1种情势。

也便是说打着构造函数的金字招牌挂羊头卖狗肉,你看创造的实例使用 instanceof 都没办法儿指向构造函数!

如此方法能够在特殊情状下接纳。举个例子我们想成立一个具有额外措施的卓殊规数组,然而又不想一向修改Array构造函数,大家得以那样写:

function SpecialArray() { var values = new Array(); for (var i = 0, len = arguments.length; i len; i ) { values.push(arguments[i]); } values.toPipedString = function () { return this.join("|"); }; return values; } var colors = new SpecialArray('red', 'blue', 'green'); var colors2 = SpecialArray('red2', 'blue2', 'green2'); console.log(colors); console.log(colors.toPipedString()); // red|blue|green console.log(colors2); console.log(colors2.toPipedString()); // red2|blue2|green2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function SpecialArray() {
    var values = new Array();
 
    for (var i = 0, len = arguments.length; i  len; i ) {
        values.push(arguments[i]);
    }
 
    values.toPipedString = function () {
        return this.join("|");
    };
    return values;
}
 
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

您会开采,其实所谓的寄生构造函数情势就是比厂子格局在创立对象的时候,多利用了一个new,实际上两者的结果是一样的。

只是小编恐怕是梦想能像使用普通 Array 同样采纳 SpecialArray,即便把 SpecialArray 当成函数也1致能用,然则那并不是笔者的本心,也变得不优雅。

在能够利用其它格局的情况下,不要采纳这种形式。

可是值得一说的是,上面例子中的循环:

for (var i = 0, len = arguments.length; i len; i ) { values.push(arguments[i]); }

1
2
3
for (var i = 0, len = arguments.length; i  len; i ) {
    values.push(arguments[i]);
}

能够替换到:

values.push.apply(values, arguments);

1
values.push.apply(values, arguments);

var parent = new Parent() ;
var child = new Child() ;

伍.二 伏贴构造函数格局

function person(name){ var o = new Object(); o.sayName = function(){ console.log(name); }; return o; } var person1 = person('kevin'); person1.sayName(); // kevin person1.name = "daisy"; person1.sayName(); // kevin console.log(person1.name); // daisy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function person(name){
    var o = new Object();
    o.sayName = function(){
        console.log(name);
    };
    return o;
}
 
var person1 = person('kevin');
 
person1.sayName(); // kevin
 
person1.name = "daisy";
 
person1.sayName(); // kevin
 
console.log(person1.name); // daisy

所谓妥当对象,指的是从没有过国有属性,而且其方法也不引用 this 的目的。

与寄生构造函数格局有两点差异:

  1. 新创造的实例方法不引用 this
  2. 不行使 new 操作符调用构造函数

安妥对象最适合在有些平安的条件中。

妥当构造函数情势也跟工厂情势同样,不能够辨识对象所属类型。

console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

深切体系

JavaScript长远连串目录地址:。

JavaScript浓厚连串估摸写105篇左右,意在帮大家捋顺JavaScript底层知识,重视讲明如原型、效用域、施行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难处概念。

1经有荒唐也许十分大心的地方,请务必给予指正,十三分感激。假如喜欢也许有所启发,欢迎star,对小编也是壹种鞭策。

  1. JavaScirpt 深刻之从原型到原型链
  2. JavaScript 深刻之词法作用域和动态功能域
  3. JavaScript 深刻之实行上下文栈
  4. JavaScript 深远之变量对象
  5. JavaScript 深远之效果域链
  6. JavaScript 深远之从 ECMAScript 标准解读 this
  7. JavaScript 深刻之实行上下文
  8. JavaScript 深切之闭包
  9. JavaScript 深远之参数按值传递
  10. JavaScript 深入之call和apply的上行下效完毕
  11. JavaScript 深刻之bind的模拟达成
  12. JavaScript 深远之new的模仿达成
  13. JavaScript 深切之类数组对象与 arguments

    1 赞 收藏 评论

皇家娱乐平台 3

那种是最简便易行完成原型承继的办法,间接把父类的对象赋值给子类构造函数的原型,那样子类的目的就可以访问到父类以及父类构造函数的prototype中的属性。 那种措施的原型承接图如下:

皇家娱乐平台 4

那种措施的独到之处很确定,实现充裕简易,无需任何特殊的操作;同时缺点也很备受关注,假若子类需求做跟父类构造函数中壹律的初步化动作,那么就得在子类构造函数中再另行一次父类中的操作:

复制代码 代码如下:

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;

var parent = new Parent('myParent') ;
var child = new Child('myChild') ;

console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

上边那种情状还只是急需伊始化name属性,假使开头化工作持续充实,那种格局是很不方便人民群众的。因而就有了上面壹种创新的法子。

借用构造函数

复制代码 代码如下:

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;

本文由68399皇家赌场发布于集成经验,转载请注明出处:【皇家娱乐平台】再谈javascript原型继承,深入之

关键词: 68399皇家赌场 JavaScript

上一篇:没有了

下一篇:没有了

最火资讯