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

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

“如果你不能向一个六岁的孩子解释它，你自己就真的不理解它。”。好吧，我试着向一个22岁的朋友解释JavaScript原型概念，但完全失败了

如果一个6岁的人对这个话题有着奇怪的兴趣，你会怎么解释呢？

---

我看到了Stack Overflow中给出的一些示例，但没有任何帮助。

经典继承是关于扩展事物类型的。假设您有一个类，比如

Bike

。当您想要扩展行为时，您必须设计一种新类型的自行车（比如

MotorBike

）

这就像建造一座工厂——你制作了很多蓝图，这些蓝图引用了这些蓝图，但是为了骑上它们，你必须拿着蓝图并从中做出一些东西

基于原型的继承是关于事物本身的扩展。假设你有一种制作

自行车

对象的方法。你把这些

自行车

中的一个带进车库，然后绑上喷气发动机

这与蓝图不符。这是你对这辆特殊自行车所做的事情。但是你的朋友看到了你的新发明，也想要一辆。因此，你没有为你的新设计绘制蓝图，而是贴了一个牌子，上面写着“

JetBike

factory”“然后开始制作更多。每当你记不起什么东西是如何组合在一起的时候，与其看蓝图，不如看你原来的自行车。你原来的自行车是原型自行车，所有的新自行车都是基于它

现在，对于一个真正的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
};

---

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

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

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

function Foo() {

}
Foo.prototype.someProperty = 'blahblahblah';

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

function Bar() {

}
Bar.prototype = new Foo();

然后您可以访问继承的所有内容

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

有趣的挑战：-）

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

“原型遗传就像口袋妖怪，可以从其他口袋妖怪那里窃取力量。”

想一想你可以创造你自己的口袋妖怪。你可以决定它有多大，它是什么颜色等（构造器）。然后你可以给口袋妖怪力量（原型）。你可以根据自己的需要繁殖任意数量的口袋妖怪。原型遗传给你的是让一个、几个或所有这些口袋妖怪从其他口袋妖怪那里窃取力量的可能性。你甚至可以从已经从另一个口袋妖怪那里偷取异能的口袋妖怪那里偷取异能。这创造了一系列全新的超级神奇宝贝

---

也许有点傻，但它反映了原型遗传是多么强大。。。从口袋妖怪的角度来看：-）

与大多数其他面向对象语言不同，JavaScript实际上没有概念 上课的时间。在大多数其他面向对象语言中，您会实例化特定类的实例，但在JavaScript中则不是这样。
在JavaScript中，对象可以创建新对象，对象可以从其他对象继承。
整个概念称为原型遗传

但是我们如何制作一个物体呢？
只需使用

{}

创建泛型对象即可

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

无法创建

的实例，因为它不是函数。换句话说，它没有特殊的内部方法
[[Construct]]

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

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

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

alert(User instanceof Function); //true

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

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

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

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

并且它是
用户
对象的一个实例：

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

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

User( "Test" );

由于未设置其
此
上下文，因此默认为全局
窗口
对象，这意味着
窗口.名称
等于提供的
名称
：

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

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

var you = new me.constructor();

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

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

原型和公共方法
Prototype只包含一个对象，该对象将作为其父对象的所有新副本的基础引用。本质上，任何p
function User( name, age ){
   this.name = name;
   this.age = age;
}

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

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

alert( user.name );

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

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

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

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

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

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

/* 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
    })();