深切理解JavaScript承接的两种方式和优劣势,jav

面象对象编程技术的核心理念:封装、继承、多态;在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接和容易了,因为javascript并不是面向对象的语言,所以我们只能通过javascript的一些特性,比如:闭包、原型链等来模拟出面向对象编程,我认为这些是作为熟练掌握与灵活运用javascript的基础,园子里已有很多的javascript高手对于这方面都有介绍与分析,而我仅以作为一个项目负责人(独立设计与开发WEB前端与后端)的视角来重新理解javascript面向对象要点。

写在前面

既然是面向对象,首先我们要知道如何创建一个对象,以下列出了创建对象的几种常见方法:

本文讲解JavaScript各种继承方式和优缺点。

A.直接创建一个对象实例:

注意:

//直接实例化一个对象
var Person1 = { Name: "梦在旅途", Age: 29, Sex: "男", Height: 178 };

alert(Person1.Name);

var Person2 = new Object();
Person2.Name = "梦在旅途";
Person2.Age = 29;
Person2.Sex = "男";
Person2.Height = 178; 

alert(Person2.Name);

//这个是上面的简写
var Person3 = new Object({ Name: "梦在旅途", Age: 29, Sex: "男", Height: 178 });
alert(Person3.Name);

跟《JavaScript深入之创建对象》一样,更像是笔记。

优点:直接创建一个对象,无需提前定义类型;

哎,再让我感叹一句:《JavaScript高级程序设计》写得真是太好了!

缺点:无法实现复用;

1.原型链继承

B.先定义后实例化对象:

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 Person4(n,a,s,h) {
    this.Name = n;
    this.Age = a;
    this.Sex = s;
    this.Height = h;
}

var p4 = new Person4("梦在旅途", 29, "男", 178);
alert(p4.Age);

问题:

优点:类似面向对象编程语言的构造函数,容易理解,且定义后可通过new关键字实例化多个对象,实现复用。

1.引用类型的属性被所有实例共享,举个例子:

缺点:需先定义后才能实例化;

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"]

综上所述,建议采用B方法来创建对象。

2.在创建 Child 的实例时,不能向Parent传参

实现封装,即只暴露公共方法与公共属性,隐藏实现细节(私有方法、属性)

2.借用构造函数(经典继承)

function Person5(n, a, s, h) {

    //公共属性
    this.Name = n;
    this.Age = a;
    this.Sex = s;
    this.Height = h;

    //公共方法
    this.AfterYear = function (count) {
        updateAge(count);
        alert(_currentYear  "后,我已经:"   this.Age  "岁了!");
    };

    this.Say = function () {
        alert("我的个人信息--> Name: "  this.Name ", Age: "  this.Age  ", Sex: "  this.Sex  ", Height:"   this.Height);
    }

    //私有属性与方法
    var _self = this;
    var _currentYear = 2015;
    function updateAge(count) {
        _currentYear  = count;
        _self.Age  = count;
    };
}

var p5 = new Person5("梦在旅途", 29, "男", 178);
p5.AfterYear(10);
p5.AfterYear(25);
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"]

利用原型链实现继承,即一个对象包含另一个对象的所有公共属性与方法,实现继承的方法有很多,我觉得采用如下形式来模拟继承更符合面向对象的思维:

优点:

function SoftEngineer(n, a, s, h, lang) {
    Person5.call(this, n, a, s, h);//将Person5的所有属性与方法包含到SoftEngineer中,从而实现继承
    this.Lang = lang;
    this.SayCode = function () {
        alert("我是一名软件工程师,我会"   this.Lang   "编程语言!");
    }

    this.Working = function () { };//空方法,类似面向对象中的虚方法
}

SoftEngineer.prototype = new Person5(); //将SoftEngineer的原型指定Person5的实例

var softengr = new SoftEngineer("梦在旅途", 29, "男", 178, "javascript");
softengr.Say();
softengr.SayCode();

1.避免了引用类型的属性被所有实例共享

利用原型链实现多态,即基于同一个方法签名在不同的子类中表现的形式不同:

2.可以在 Child 中向 Parent 传参

function WebSoftEngineer(n, a, s, h, lang) {
    SoftEngineer.apply(this, [n, a, s, h, lang]);
    this.Working = function () {
        alert("我是网页工程师,从事网页开发设计工作!");
    };
};

WebSoftEngineer.prototype = new SoftEngineer();

function AppSoftEngineer(n, a, s, h, lang) {
    SoftEngineer.apply(this, [n, a, s, h, lang]);
    this.Working = function () {
        alert("我是应用工程师,从事客户端应用程序开发设计工作!");
    };
};
AppSoftEngineer.prototype = new SoftEngineer();

var webengr = new WebSoftEngineer("梦在旅途", 29, "男", 178, "javascript");
webengr.Say();
webengr.Working();

var appengr = new AppSoftEngineer("梦在旅途", 29, "男", 178, "c#");
appengr.Say();
appengr.Working();

举个例子:

  

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

 

缺点:

方法都在构造函数中定义,每次创建实例都会创建一遍方法。

3.组合继承

原型链继承和经典继承双剑合璧。

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 中最常用的继承模式。

4.原型式继承

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

就是 ES5 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"]

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

5. 寄生式继承

创建一个仅用于封装继承过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。

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

缺点:跟借用构造函数模式一样,每次创建对象都会创建一遍方法。

6. 寄生组合式继承

为了方便大家阅读,在这里重复一下组合继承的代码:

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();

一次在创建子类型实例的时候:

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

回想下 new 的模拟实现,其实在这句中,我们会执行:

Parent.call(this, name);

在这里,我们又会调用了一次 Parent 构造函数。

所以,在这个例子中,如果我们打印 child1 对象,我们会发现 Child.prototype 和 child1 都有一个属性为colors,属性值为['red', 'blue', 'green']。

那么我们该如何精益求精,避免这一次重复调用呢?

如果我们不使用 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 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);

引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是:

这种方式的高效率体现它只调用了一次Parent构造函数,并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 简单的JS多重继承示例
  • JavaScript mixin实现多继承的方法详解
  • JS 面向对象之继承---多种组合继承详解
  • 谈一谈javascript中继承的多种方式
  • ExtJS4中使用mixins实现多继承示例
  • 用JavaScript实现单继承和多继承的简单方法
  • Javascript基于对象三大特性(封装性、继承性、多态性)
  • js中实现多态采用和继承类似的方法
  • javascript 面向对象全新理练之继承与多态
  • JavaScript实现多重继承的方法分析

本文由亚洲必赢娱乐游戏发布于亚洲必赢,转载请注明出处:深切理解JavaScript承接的两种方式和优劣势,jav

TAG标签: 亚洲必赢
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。