javascript:what'；函数和类之间的区别是什么

我想知道函数和类之间有什么区别。

---

两者都使用关键字函数，这两者之间有明显的区别吗？

从技术上讲，没有类，它们都只是函数。任何函数都可以用关键字

new

作为构造函数调用，该函数的原型属性用于从中继承方法的对象

“类”仅在概念上用于描述上述实践

所以，当有人对你说“做一个色彩课”或其他什么的时候，你会做：

function Color(r, g, b) {
    this.r = r;
    this.g = g;
    this.b = b;
}

Color.prototype.method1 = function() {

};

Color.prototype.method2 = function() {

};

当你分解它时，只需要一个函数和一些赋值给该函数名为

prototype

的属性 通用javascript语法，没什么特别的

当你说

var black=new Color（0,0,0）

时，一切都变得有点不可思议。然后，您将获得一个属性为

.r

、

.g

和

.b

的对象。那个物体

---

还将有一个指向

Color.prototype

的隐藏[[prototype]]链接。这意味着您可以说

black.method1（）

，即使

.method1（）

不存在于

black

对象中。

术语类通常在面向对象编程语言上下文中使用。类是将在实例化时创建的对象的模板。JavaScript是一种基于原型的编程语言，因此使用术语类来描述JavaScript原型有点奇怪。在JavaScript中，原型是作为函数创建的。在JavaScript中，没有类。javascript使用原型继承而不是基于类的继承。许多人会使用javascript引用类，因为它更容易理解，但这纯粹是一种类比

在基于类的继承中，您创建一个类（如果愿意，可以创建一个“蓝图”），然后从该类实例化对象

在原型继承中，对象直接从另一个父对象实例化，而不需要任何“蓝图”

---

有关类与原型继承的更多信息，请参阅。

本文强调了函数和类之间的一个关键区别，这表明函数是一种可以承载数据的行为，而类是一种可以承载行为的数据。

是ECMAScript标准最流行的实现。Javascript的核心特性基于ECMAScript标准，但Javascript还有其他ECMA规范/标准中没有的附加特性。每个浏览器都有一个JavaScript解释器

---

«ECMAScript最初设计为一种Web脚本语言，提供了一种在浏览器中激活网页的机制，并作为基于Web的客户机-服务器体系结构的一部分执行服务器计算。脚本语言是一种编程语言，用于操作、自定义和自动化现有系统的设施

ECMAScript是一种面向对象的编程语言，用于在宿主环境中执行计算和操作计算对象。 web浏览器为客户端计算提供ECMAScript主机环境，例如，包括表示窗口、菜单、弹出窗口、对话框、文本区域、锚定、帧、历史、cookie和输入/输出的对象

ECMAScript是基于对象的：基本语言和主机设施由对象提供，ECMAScript程序是通信对象的集群

对象«

• 每个构造函数都是一个具有名为“prototype”的属性的函数，该属性用于实现基于原型的继承和共享属性

• 由构造函数创建的每个对象都对其

  构造函数的“prototype”属性的值有一个隐式引用（称为对象的原型）。此外，原型可能具有对其原型的非空隐式引用，等等；这称为
  原型链
  

---

功能 JavaScript将函数视为一级对象，因此作为一个对象，您可以为函数分配属性。

提升是JavaScript解释器将所有变量和函数声明移动到当前范围顶部的操作

FunctionDeclaration:函数绑定标识符（FormalParameters）{FunctionBody} FunctionExpression:函数绑定标识符（FormalParameters）{FunctionBody}

ES5功能：

function Shape(id) { // Function Declaration
    this.id = id;
};
// prototype was created automatically when we declared the function
Shape.hasOwnProperty('prototype'); // true

// Adding a prototyped method to a function.
Shape.prototype.getID = function () {
    return this.id;
};

var expFn = Shape; // Function Expression
console.dir( expFn () ); // Function Executes and return default return type - 'undefined'

如果未指定返回值，则返回

undefined

如果使用

new

调用函数，且返回值不是对象，则返回此（新对象）。

注意：为每个函数自动创建一个原型属性，以允许函数用作构造函数

• 构造函数

  «创建和初始化对象的函数对象

• prototype

  «为其他对象提供共享属性的对象

• \uuuu proto\uuuu

  «指向其超级对象原型的proto属性。如果你打开它，你会看到proto指向它的超级对象变量和函数

要访问上述板条箱函数的原型方法，我们需要使用

new

关键字以及

构造函数创建对象。如果您正在使用
new
关键字创建
Shape-Object
，则它具有to函数的原型
Shape

ES5构造函数函数类：使用Function.prototype.bind创建的函数对象

ES5功能类：使用

方法def
Shape.prototype.setID = function ( id ) {
    this.id = id;
};

var funObj = new Shape( );
funObj.hasOwnProperty('prototype'); // false
funObj.setID( 10 )
console.dir( funObj );

console.log( funObj.getID() );
/*
expFun                            funObj
    name: "Shape"                   id: 10
    prototype:Object
        constructor: function Shape(id)
        getID: function()
        setID: function( id )
    __proto__: function ()          __proto__: Object
                                        constructor: function Shape(id)
                                        getID: function()
                                        setID: function( id )
    <function scope>
*/

  a => (a < 10) ? 'valid' : 'invalid'

  const fn = (item) => { return item & 1 ? 'Odd' : 'Even'; };
    console.log( fn(2) ); // Even
    console.log( fn(3) ); // Odd

class Shape {
  constructor(id) {
    this.id = id
  }

  get uniqueID() {
    return this.id;
  }
  set uniqueID(changeVal) {
    this.id = changeVal;
  }
}
Shape.parent_S_V = 777;

// Class Inheritance
class Rectangle extends Shape {

  constructor(id, width, height) {
    super(id)
    this.width = width
    this.height = height
  }
  // Duplicate constructor in the same class are not allowed.
  /*constructor (width, height) { this._width  = width; this._height = height; }*/

  get area() {
    console.log('Area : ', this.width * this.height);
    return this.width * this.height
  }
  get globalValue() {
    console.log('GET ID : ', Rectangle._staticVar);
    return Rectangle._staticVar;
  }
  set globalValue(value) {
    Rectangle._staticVar = value;
    console.log('SET ID : ', Rectangle._staticVar);
  }

  static println() {
    console.log('Static Method');
  }

  // this.constructor.parent_S_V - Static property can be accessed by it's instances
  setStaticVar(staticVal) { // https://sckoverflow.com/a/42853205/5081877
    Rectangle.parent_S_V = staticVal;
    console.log('SET Instance Method Parent Class Static Value : ', Rectangle.parent_S_V);
  }

  getStaticVar() {
    console.log('GET Instance Method Parent Class Static Value : ', Rectangle.parent_S_V);
    return Rectangle.parent_S_V;
  }
}
Rectangle._staticVar = 77777;

var objTest = new Rectangle('Yash_777', 8, 7);
console.dir( objTest );

    'use strict';
var Shape = function ( superClass ) {
    var currentClass = Shape;
    _inherits(currentClass, superClass); // Prototype Chain - Extends

    function Shape(id) { superClass.call(this); // Linking with SuperClass Constructor.
        // Instance Variables list.
        this.id = id;   return this;
    }
    var staticVariablesJOSN = { "parent_S_V" : 777 };
    staticVariable( currentClass, staticVariablesJOSN );

    // Setters, Getters, instanceMethods. [{}, {}];
    var instanceFunctions = [
        {
            key: 'uniqueID',
            get: function get() { return this.id; },
            set: function set(changeVal) { this.id = changeVal; }
        }
    ];
    instanceMethods( currentClass, instanceFunctions );

    return currentClass;
}(Object);

var Rectangle = function ( superClass ) {
    var currentClass = Rectangle;

    _inherits(currentClass, superClass); // Prototype Chain - Extends

    function Rectangle(id, width, height) { superClass.call(this, id); // Linking with SuperClass Constructor.

        this.width = width;
        this.height = height;   return this;
    }

    var staticVariablesJOSN = { "_staticVar" : 77777 };
    staticVariable( currentClass, staticVariablesJOSN );

    var staticFunctions = [
        {
            key: 'println',
            value: function println() { console.log('Static Method'); }
        }
    ];
    staticMethods(currentClass, staticFunctions);

    var instanceFunctions = [
        {
            key: 'setStaticVar',
            value: function setStaticVar(staticVal) {
                currentClass.parent_S_V = staticVal;
                console.log('SET Instance Method Parent Class Static Value : ', currentClass.parent_S_V);
            }
        }, {
            key: 'getStaticVar',
            value: function getStaticVar() {
                console.log('GET Instance Method Parent Class Static Value : ', currentClass.parent_S_V);
                return currentClass.parent_S_V;
            }
        }, {
            key: 'area',
            get: function get() {
                console.log('Area : ', this.width * this.height);
                return this.width * this.height;
                }
        }, {
            key: 'globalValue',
            get: function get() {
                console.log('GET ID : ', currentClass._staticVar);
                return currentClass._staticVar;
            },
            set: function set(value) {
                currentClass._staticVar = value;
                console.log('SET ID : ', currentClass._staticVar);
            }
        }
    ];
    instanceMethods( currentClass, instanceFunctions );

    return currentClass;
}(Shape);

// ===== ES5 Class Conversion Supported Functions =====
function defineProperties(target, props) {
    console.log(target, ' : ', props);
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
    }
}
function staticMethods( currentClass, staticProps ) {
    defineProperties(currentClass, staticProps);
};
function instanceMethods( currentClass, protoProps ) {
    defineProperties(currentClass.prototype, protoProps);
};
function staticVariable( currentClass, staticVariales ) {
    // Get Key Set and get its corresponding value.
    // currentClass.key = value;
    for( var prop in staticVariales ) {
        console.log('Keys : Values');
        if( staticVariales.hasOwnProperty( prop ) ) {
            console.log(prop, ' : ', staticVariales[ prop ] );
            currentClass[ prop ] = staticVariales[ prop ];
        }
    }
};
function _inherits(subClass, superClass) {
    console.log( subClass, ' : extends : ', superClass );
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, 
            { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });
    if (superClass)
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

var objTest = new Rectangle('Yash_777', 8, 7);
console.dir(objTest);