Question

我已经经历了大量有描述的Stack Overflow问题，但我认真地发现它们非常令人困惑。我想要的是一个简单的解释，请不要参考链接。

我完全糊涂了，完全混淆了：

原型，
对象，
构造

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

任何简单的解释？

Answer 1

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

第一步：创建一个对象

说你想圈：

var circle = {};

第二步：给它一些属性

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

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

属性只是属于对象的变量。变量本身不是属性。
属性和变量可以包含任何类型的数据。 JavaScript中的函数就是数据。
当一个属性持有一个函数时，它被称为方法。

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

第三步：扩展对象

现在我想要一个球，一个球就像一个圆圈。所以让我们扩展circle来创建一个球：

var ball = Object.create(circle);

我们在此处获取了对象circle并使用它来创建一个名为ball的新对象。
对象ball现在具有circle的所有属性。我们可以致电ball.draw。
对象circle是ball。

第四步：给它一些属性

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

ball.radius = 5;

第五步：创建一个构造函数

这里有一个问题。每当我想要创建一个新球时，我会延伸circle并手动定义球的radius。相反，我想要一个创建球的功能，并给我一个半径。此函数称为构造函数：

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

您需要了解原型，对象和构造函数。

当然还有更多的解释，但对于一个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();）的实例，并执行initialize的{{1}}方法。它还以30毫秒的间隔调用garden函数。

_doit

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 ) ); } },的{{1}}方法然后创建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<lerpTime ) { lerp( (elapsed-nextLerpTime)%nextLerpTime, lerpTime ); } } }的{{1}}函数，_doit paint函数调用每个草的garden函数

所以这里有两个构造函数：

paint
garden

以下是两个原型：

paint
Grass

在Garden函数中，我们创建了Grass.prototype的单个实例（即一个对象）：

Garden.prototype

在init的{{1}}方法中，我们创建了Garden的多个实例：

var garden= new Garden();

那就是它。

Answer 2

我想我已经太晚了，但这将是我的2美分：

<强>原型：

String.prototype.x = "yahoo"

现在 String 的每个实例都将具有 x 属性。

因此，(new String()).x或"".x的值均等于 yahoo

因此，它就像扩展预定义的类一样。

<小时/> <强>物件

除了其他原始类型之外，JavaScript中的所有内容都是一个对象。

对象是名称 - 值对的集合，仅此而已。

{"a": 0, "b" : 1}

甚至数组也是JS中的一个对象，具有一些额外的属性＆amp;方法

功能＆amp;方法

这是一个功能：

function a() { };

现在让我们给它一个数组方法的状态：

Array.prototype.a = a;

构造

new String()

从String.constructor
获取String的实现
同样，你在任何函数中编写的代码都会进入这个函数。

Answer 3

JavaScript是Web应用程序中用于使网页动态化的脚本语言。该语言允许通过处理页面上显示的元素上的事件来处理用户操作....还用于根据条件修改网页上的内容...

方法（或）函数是javascript中用于指定逻辑的编程构造。您将把所需的逻辑放在一个方法中，并且您将在任何事件中从网页调用它......

javascript中没有构造函数...

javascript中会有隐式和用户定义的对象......隐式对象包括Date，Array等......

这只是一个基本摘要..你需要关注网站（或）书籍以了解更多关于javascript的信息

Javascript原型，对象，构造函数？我很困惑

3 个答案: