Javascript原型，对象，构造函数我很困惑 [英] Javascript Prototypes,objects,constructor??i am confused

问题描述

我经历了大量的堆栈溢出问题，有描述，但我认真发现他们很混乱。我想要的是一个简单的解释，请不要指向链接。

我完全感到困惑，完全混乱：

我做了大量的研究，但我发现它们很复杂。

??

解决方案

你很幸运。有一个非常简单的解释：

第一步：创建对象

您要圈选：

  var circle = {}; 
  

第二步：给它一些属性 b

可以绘制一个圆圈，让我们创建一个名为 draw 的属性：

  circle.draw = function（）{
 //绘图逻辑
}; 
  

1. 属性只是一个属于对象的变量。变量本身不是属性。


2. 属性和变量可以保存任何类型的数据。 JavaScript中的函数是数据。


3. 当属性保存函数时，它被称为方法。

因此，我们有一个名为 draw 的方法属于对象 circle 。

第三步：扩展对象

现在我想要一个球，一个球就像一个圆。因此，让我们扩展 circle 创建一个球：

  var ball = Object .create（circle）; 
 





1. 这里我们使用 circle ，并用它来创建一个名为 ball 的新对象。
现在具有 circle 的所有属性。所以我们可以调用 ball.draw 。


2. 对象 circle ball 的原型。

第四步：

每个球都有一个半径，所以让我们给一个：

  ball.radius = 5; 
  

第五步：创建构造函数

这里有一个问题。每次我想创建一个新球时，我扩展 circle 并手动定义球的 radius 。相反，我想要一个功能来创建球，给它一个半径为我。这个函数被称为构造函数：

  function createBall（radius）{
 var ball = Object.create ; 
 ball.radius = radius; 
 return ball; 
} 
 
 var baseball = createBall（5）; 
 var basketball = createBall（10）; 
 
 baseball.draw（）; 
 basketball.draw（）; 
  

这就是你需要了解的原型，对象和构造函数。

当然有更多的解释，但是对于一个StackOverflow的答案太多了。我写了一篇博客文章，我不打算在这里重写相同​​的东西。你应该读我的博客。这是值得的： http://aaditmshah.github.io/why-prototypal-inheritance-matters

---

修改：当然，我将解释该代码中发生的情况： http://cssdeck.com/labs/4ksohwya​​

首先，向下滚动到最后：

  window.addEventListener（
'load'，
 init（null），
 false）; 
  

当页面加载时执行 init ：

  function init（images）{
 
 canvas = document.getElementById（'s'）; 
 ctx = canvas.getContext（'2d'）; 
 canvas.width = window.innerWidth; 
 canvas.height = window.innerHeight; 
 
 garden = new Garden（）; 
 garden.initialize（canvas.width，canvas.height，300）; 
 
 lerp（0,2000）; 
 
 time = new Date（）。getTime（）; 
 interval = setInterval（_doit，30）; 
} 
  

init 函数创建 Garden （ garden = new Garden（）; ）的实例，并执行 garden 的方法。它还以30毫秒的间隔调用 _doit 函数。

 初始化：function（width，height，size）{
 this.width = width; 
 this.height = height; 
 this.grass = []; 
 
 for（var i = 0; i  var g = new Grass（）; 
 g.initialize（
 width，
 height，
 50，// min grass height 
 height * 2/3，// max grass height 
 20，//草最大初始随机角度
 40 //动画最大随机角度
）; 
 this.grass.push（g）; 
} 
 
 this.stars = []; 
 for（i = 0; i  this.stars.push（Math.random（）*（width-10）+5））; 
 this.stars.push（Math.floor（Math.random（）*（height-10）+5））; 
} 
}，
  

initialize 方法 garden 然后创建一些 Grass 的实例，调用它们的 initialize 方法并将它们存储在数组中。

  function _doit（）{
 
 ctx.fillStyle = gradient; 
 ctx.fillRect（0,0，canvas.width，canvas.height）; 
 var ntime = new Date（）。getTime（）; 
 var elapsed = ntime-time; 
 garden.paint（ctx，elapsed）; 
 
 // lerp。 
 if（elapsed> nextLerpTime）{
 lerpindex = Math.floor（（elapsed-nextLerpTime）/ nextLerpTime）; 
 if（（elapsed-nextLerpTime）％nextLerpTime  lerp（（elapsed-nextLerpTime）％nextLerpTime，lerpTime）; 
} 
} 
 
} 
  



_doit 函数调用 garden 的 paint 函数， code> paint 函数 garden 调用每个草的 paint 函数。

---

这里有两个构造函数：

1. 草


2. 花园
$ b

以下是两个原型：

1. Grass.prototype


2. Garden.prototype

在 init 函数中，我们创建一个 Garden 一个对象）：

  var garden = new Garden 
  

初始化 $ c> garden 我们创建 Grass 的多个实例：

 code> var g = new Grass（）; 
  

就是这样。

I have gone through plenty of Stack Overflow question that had description but I seriously found them very confusing. What I want is a simple explanation,please don't refer a link.

I'm totally confused, completely jumbled up between:

• Prototypes,

• Objects,

• Constructor

I have done plenty of research but I found them very complicated.

Any simple explanation??

解决方案

You're in luck. There's a very simple explanation:

Step One: Create an Object

Say you want to circle:

var circle = {};

Step Two: Give it Some Properties

A circle can be drawn, so let's create a property called draw:

circle.draw = function () {
    // drawing logic
};

1. A property is simply a variable belonging to an object. A variable by itself is not a property.
2. Properties and variables can hold any kind of data. Functions in JavaScript is data.
3. When a property holds a function it's called a method.

Hence we have a method called draw belonging to the object circle.

Step Three: Extend an Object

Now I want a ball and a ball is kind of like a circle. So let's extend circle to create a ball:

var ball = Object.create(circle);

1. Here we took the object circle and used it to create a new object called ball.
2. The object ball now has all the properties of circle. So we can call ball.draw.
3. The object circle is the prototype of ball.

Step Four: Give it Some Properties

Every ball has a radius, so let's give ours one:

ball.radius = 5;

Step Five: Create a Constructor

There's a problem here. Every time I want to create a new ball I extend circle and manually define the radius of the ball. Instead I would like a function to create the ball and give it a radius for me. This function is called a constructor:

function createBall(radius) {
    var ball = Object.create(circle);
    ball.radius = radius;
    return ball;
}

var baseball = createBall(5);
var basketball = createBall(10);

baseball.draw();
basketball.draw();

That's pretty much all you need to know about prototypes, objects and constructors.

Of course there's a lot more explanation but it's too much for one StackOverflow answer. I wrote a blog post on it, and I'm not planning to rewrite the same thing here. You should read my blog. It's worth it: http://aaditmshah.github.io/why-prototypal-inheritance-matters

---

Edit: Sure, I'll explain what happening in that code: http://cssdeck.com/labs/4ksohwya

First, scroll down to the very end:

window.addEventListener(
    'load',
    init(null),
    false);

When the page loads it executes init:

function init(images) {

    canvas= document.getElementById('s');
    ctx= canvas.getContext('2d');
    canvas.width= window.innerWidth;
    canvas.height=window.innerHeight;

    garden= new Garden();
    garden.initialize(canvas.width, canvas.height, 300);

    lerp(0,2000);

    time= new Date().getTime();
    interval = setInterval(_doit, 30);
}

The init function creates an instance of Garden (garden = new Garden();) and executes the initialize method of garden. It also calls the _doit function in intervals of 30 milliseconds.

initialize : function(width, height, size)  {
  this.width= width;
  this.height= height;
  this.grass= [];

  for(var i=0; i<size; i++ ) {
    var g= new Grass();
    g.initialize(
        width,
        height,
        50,      // min grass height 
        height*2/3, // max grass height
        20,     // grass max initial random angle 
        40      // max random angle for animation 
        );
    this.grass.push(g);
  }

  this.stars= [];
  for( i=0; i<this.num_stars; i++ )  {
    this.stars.push( Math.floor( Math.random()*(width-10)+5  ) );
    this.stars.push( Math.floor( Math.random()*(height-10)+5 ) );
  }
},

The initialize method of garden then creates some instances of Grass, calls their initialize methods and stores them in an array.

function _doit()    {

  ctx.fillStyle= gradient;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  var ntime= new Date().getTime();
  var elapsed= ntime-time;
  garden.paint( ctx, elapsed );

  // lerp.
  if ( elapsed>nextLerpTime ) {
    lerpindex= Math.floor((elapsed-nextLerpTime)/nextLerpTime);
    if ( (elapsed-nextLerpTime)%nextLerpTime<lerpTime ) {
      lerp( (elapsed-nextLerpTime)%nextLerpTime, lerpTime );
    }
  }

}

The _doit function calls the paint function of garden, and the paint function of garden calls the paint function of each grass.

---

So here there are two constructors:

1. Grass
2. Garden

Here are the two prototypes:

1. Grass.prototype
2. Garden.prototype

Inside the init function we create a single instance of Garden (that's one object):

var garden= new Garden();

Inside the initialize method of garden we create multiple instances of Grass:

var g= new Grass();

That's it.

这篇关于Javascript原型，对象，构造函数我很困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！