javascript - javascript中的原型继承概念作为基于原型的语言

Question

你知道 Javascript 是一种基于原型的编程语言。
我读过一些关于 Javascript 及其原型继承概念的书，但是：

“如果你不能给一个 6 岁的孩子解释，那你自己就真的不明白。”好吧，我试着给一个 22 岁的朋友解释 JavaScript 原型的概念，完全失败了！

你会如何向一个对这个主题非常感兴趣的 6 岁孩子解释它？
我在 Stack Overflow 中看到了一些示例，但没有帮助。

Answer 1

经典继承是关于扩展事物的类型。假设你有一堂课，比如Bike. 当您想扩展行为时，您必须设计一种新型自行车（如MotorBike）。

这就像建造一座工厂——你制作了很多蓝图，以及引用这些蓝图的蓝图，但为了骑上一辆，你必须拿走蓝图并从中做出一些东西。

基于原型的继承是关于扩展事物本身。假设你有一种制作Bike物体的方法。您将其中一个Bike带入车库，然后将喷气发动机绑在上面。

这不符合蓝图。这是您对这辆特定自行车所做的事情。但是你的朋友看到​​你的装置也想要一个。因此，您不必为您的新设计制定蓝图，而是贴上一个标有“JetBike工厂”的标志，然后开始制作更多它们。每次您不记得某些东西如何组合在一起时，您只需查看原始自行车，而不是查看蓝图。您的原始自行车是原型自行车，所有新自行车都基于它。

现在，对于一个真正的 6 岁孩子来说，这可能是我要停下来的地方（如果我还没有丢失它们的话），但实际上基于原型的继承不仅仅构造副本，它还做了一些更酷的事情——它实际上将新JetBike对象链接到您车库中的原始原型自行车。如果您更换原型自行车的避震器，那么您所有朋友的自行车也会神奇地更换避震器。

让我们看一些 JS-ish 伪代码：

function Bike() {
    this.wheels = 2;
}
Bike.prototype = {
    ride: function() {
        // Ride the bike
    },
    crash: function() {
        // Fall off the bike
    }
};

function JetBike() {
    this.engines = 2;
}
// Start with an ordinary bike
JetBike.prototype = new Bike();
// Modify it
JetBike.prototype.fly = function () {
    // Engage thrusters and head for the ramp
};

Answer 2

与大多数其他面向对象的语言不同，JavaScript 实际上没有类的概念。在大多数其他面向对象的语言中，您会实例化特定类的实例，但在 JavaScript 中并非如此。
在 JavaScript 中，对象可以创建新对象，并且对象可以从其他对象继承。
这整个概念称为原型继承。

但是我们如何制作一个对象呢？
简单地说，您可以使用{}.

var a = {};
a.prop = "myprop";
console.log(a); //Object { prop="myprop" }

你不能创建实例，a因为它不是一个函数。换句话说，它没有特殊的内部方法[[Construct]]。

在 JavaScript 中，任何函数也可以实例化为对象。下面的函数是一个简单的函数，它接受一个名称并将其保存到当前上下文中：

function User( name ) {
   this.name = name;
}

我们可以看到这User是函数的实例：

alert(User instanceof Function); //true

使用指定的名称创建该函数的新实例：

var me = new User( "My Name" ); 

我们可以看到它name已被设置为自身的属性：

alert( me.name == "My Name" ); //true

它是User对象的一个​​实例：

alert( me.constructor == User ); //true

现在，既然User()只是一个函数，那么当我们这样对待它时会发生什么？

User( "Test" );

由于this未设置其上下文，因此默认为全局window对象，这意味着它window.name等于name提供的：

alert( window.name == "Test" ); //true

该constructor属性存在于每个对象上，并且始终指向创建它的函数。这样，您应该能够有效地复制对象，创建一个具有相同基类但属性不同的新对象。这方面的一个例子可以在下面看到：

var you = new me.constructor();

我们可以看到构造函数实际上是相同的：

alert( me.constructor == you.constructor ); //true

原型和公共方法

Prototype 只包含一个对象，该对象将作为其父对象的所有新副本的基本引用。本质上，原型的任何属性都将在该对象的每个实例上可用。这个创建/引用过程为我们提供了一个廉价版本的继承。
由于对象原型只是一个对象，因此您可以将新属性附加到它们，就像任何其他对象一样。将新属性附加到原型将使它们成为从原始原型实例化的每个对象的一部分，从而有效地公开所有属性。例子：

function User( name, age ){
   this.name = name;
   this.age = age;
}

向构造函数的原型属性添加方法和属性是向该构造函数生成的对象添加功能的另一种方法。让我们再添加一个属性CardNo和一个getName()方法：

User.prototype.CardNo='12345';
User.prototype.getName = function(){
  return this.name;
};

并在原型中添加另一个功能。请注意，上下文将在实例化对象内。

User.prototype.getAge = function(){
   return this.age;
};

实例化一个新的用户对象：

var user = new User( "Bob", 44 );

我们可以看到我们附加的两个方法都与对象一起使用，并具有适当的上下文：

alert( user.getName() == "Bob" ); //true
alert( user.getAge() == 44 ); //true

所以javascript中的每个函数都有一个原型属性。它的初始值是一个空对象 ({})。请注意，通用对象（不是函数）没有原型属性：

alert( user.prototype ); //undefined (and it is not useful even you define it)

代表团

当您尝试访问 的属性时user，假设user.nameJavaScript 引擎将查看对象的所有属性以搜索被调用的对象name，如果找到，则返回其值：

alert( user.name );

如果 javascript 引擎找不到该属性怎么办？它将识别用于创建此对象的构造函数的原型（就像您这样做一样user.constructor.prototype）。如果在原型中找到该属性，则使用此属性：

alert(user.CardNo); // "12345"

等等...
如果您想区分对象自己的属性与原型的属性，请使用hasOwnProperty(). 尝试：

alert( user.hasOwnProperty('name') ); //true
alert( user.hasOwnProperty('CardNo') ); //false

私有方法

当您直接为函数设置属性时，它将是私有的。例子：

function User()
{
    var prop="myprop";
    function disp(){
       alert("this is a private function!");
    }
}
var we = new User();
alert(we.prop); //undefined
we.disp(); // Fails, as disp is not a public property of the object

特权方法

特权方法是Douglas Crockford创造的一个术语，指的是能够查看和操作私有变量（在对象内）同时仍可供用户作为公共方法访问的方法。示例：
创建一个新的 User 对象构造函数：

function User( name, age ) {
   //Attempt to figure out the year that the user was born:
   var year = (new Date()).getFullYear() – age;

   //Create a new Privileged method that has access to the year variable, but is still publically available:
   this.getYearBorn = function(){
      return year;
   };
}

创建用户对象的新实例：

var user = new User( "Bob", 44 );

验证返回的年份是否正确：

alert( user.getYearBorn() == 1962 ); //true

请注意，我们无法访问对象的私有 year 属性：

alert( user.year == null ); //true

本质上，特权方法是动态生成的方法，因为它们是在运行时添加到对象中的，而不是在代码第一次编译时添加的。虽然这种技术在计算上比将简单方法绑定到对象原型更昂贵，但它也更加强大和灵活。

静态方法

静态方法背后的前提实际上与任何其他普通函数的前提相同。然而，主要区别在于函数作为对象的静态属性存在。作为一个属性，它们在该对象的实例的上下文中是不可访问的；它们仅在与主对象本身相同的上下文中可用。对于那些熟悉传统类继承的人来说，这有点像静态类方法。
实际上，以这种方式编写代码的唯一好处是保持对象命名空间的整洁。
附加到 User 对象的静态方法：

function User(){}
User.cloneUser = function( user ) {
   //Create, and return, a new user
   return new User( user.getName(), user.getAge() );
};

该cloneUser功能只能通过以下方式访问User：

var me = new User();
me.cloneUser(me); //Uncaught TypeError: Object #<User> has no method 'cloneUser' 

Answer 3

Javascript 是一种面向对象的语言，它的独特之处在于它没有类。相反，我们使用函数来创建对象。

所有函数都有一个原型，您使用该函数创建的所有对象都将从该原型继承所有属性和方法。由于 Javascript 没有类，因此您可以使用要继承的实际对象（而不是类）来执行继承。您可以将函数的原型设置为对象，允许您使用该函数创建的所有对象继承该函数原型对象的所有方法和属性。

因此，如果我有一个创建对象的函数：

function Foo() {

}
Foo.prototype.someProperty = 'blahblahblah';

您可以创建另一个创建对象的函数，并通过将函数原型设置为该对象来允许它继承对象的属性和方法。

function Bar() {

}
Bar.prototype = new Foo();

然后你可以访问所有继承的东西。

var bar = new Bar();
alert( bar.someProperty ); // blahblahblah

Answer 4

有趣的挑战:-)

首先，我永远不会尝试仅用文字向任何人解释这一点，但我会尝试一下 :-)

“原型继承就像一只可以从其他口袋妖怪那里窃取力量的口袋妖怪。”

认为您可以创建自己的口袋妖怪。您可以决定它有多大，它是什么颜色等（构造函数）。然后你可以赋予那个口袋妖怪力量（原型）。您可以根据需要生成任意数量的这些口袋妖怪。原型继承给你的是让一个、几个或所有这些口袋妖怪从其他口袋妖怪那里窃取力量的可能性。您甚至可以从已经从其他口袋妖怪那里窃取力量的口袋妖怪身上窃取力量。这创造了一系列全新的超强口袋妖怪。

也许有点傻，但它反映了原型继承是多么强大......在口袋妖怪意义上:-)

Answer 5

原型继承就像儿子走到哪里都背着父亲。如果有人问儿子：“你的鞋子是什么颜色的？” 他会用他的鞋子颜色来回应，除非他赤脚，否则他会用他爸爸的鞋子颜色来回应。

Answer 6

/* Here is simple way how to inherit objects properties and methods from others object by using prototyping inheritance in plain java script.*/
(function() {  
      // get dom elements for display output`enter code here
      var engTeacherPara = document.getElementById("engTeacher");
      var chemTeacherPara = document.getElementById("chemTeacher");
      // base class 
      var SchoolStaff = function(name, id) {
          this.name = name;
          this.id = id;
        }
        // method on the SchoolStaff object
      SchoolStaff.prototype.print = function() {
        return "Name : " + this.name + " Employee id: " + this.id;
      }
    
      SchoolStaff.prototype.sayHello = function() {
        return "Hello Mr : " + this.name;
      }
    
      // sub class engTeacher
      var EngTeacher = function(name, id, salary) {
          SchoolStaff.call(this, name, id);
          this.salary = salary;
        }
        // Inherit the SchoolStaff prototype
      EngTeacher.prototype = Object.create(SchoolStaff.prototype);
    
      // Set the engTeacher constructor to engTeacher object
      EngTeacher.prototype.constructor = EngTeacher;
    
      // method on engTeacher object
      EngTeacher.prototype.print = function() {
        return "Name : " + this.name + " Salary : " + this.salary + " Employee id: " + this.id;
      }
    
      // sub class chemTeacher
      var ChemTeacher = function(name, id, salary, bonus) {
          EngTeacher.call(this, name, id, salary);
          this.bonus = bonus;
        }
        // Inherit the SchoolStaff prototype
      ChemTeacher.prototype = Object.create(EngTeacher.prototype);
    
      // Set the ChemTeacher constructor to ChemTeacher object
      ChemTeacher.prototype.constructor = ChemTeacher;
    
      // method on engTeacher object
      ChemTeacher.prototype.print = function() {
        console.log("Name : " + this.name + " Salary : " + this.salary + " Employee id: " + this.id + " bonus : " + this.bonus);
      }
    
      // create new objcts and check sub class have base class methods access
      var schoolStaff = new SchoolStaff("Base Class", 100);
      console.log(schoolStaff.sayHello()); // Hello Mr : Base Class
    
      var engTeacher = new EngTeacher("Eng Teacher", 1001, 20000);
      engTeacherPara.innerHTML = engTeacher.sayHello(); // Hello Mr : Eng Teacher  
    
      var chemTeacher = new ChemTeacher("Chem Teacher", 1001, 30000, 4000);
      chemTeacherPara.innerHTML = chemTeacher.sayHello(); // Hello Mr : Chem Teacher
    })();