JavaScript 对象和文字符号 [英] JavaScript objects and literal notation

问题描述

我刚刚清除了 JavaScript 对象，我的问题对于这里的大多数人来说非常简单.我对 JavaScript 对象字面量表示法很满意，例如:

var Obj = {/*** @type {字符串}*/名称: ''，/*** 设置名称* 设置`name` 属性.** @param 参数*/设置集合名称(参数){this.name = 参数；}};

我发现的唯一限制是，如果我想在同一个页面中创建两个完全独立的对象，我不能使用这种表示法.

var a = Obj;a.setName = "约翰";var b = Obj;b.setName = "彼得";//输出//a.name ->彼得//b.name ->彼得

Set var nothing = Obj 只是没用，因为它不会实例化 n 单独的对象，它只会覆盖上面的代码.使用 new 关键字(例如 var a = new Obj )也不起作用(可能是我以错误的方式使用它?).我想出的解决方案是在函数内返回对象，例如:

function Obj() {返回 {/*** @type {字符串}*/名称: ''，/*** 设置名称* 设置`name` 属性.** @param 参数*/设置集合名称(参数){this.name = 参数；}}}

这样我就可以创建两个不同的对象并正确访问它们的属性和方法:

var a = Obj();a.setName = "约翰";var b = Obj();b.setName = "彼得";//输出//a.name ->约翰//b.name ->彼得

所以，我的问题是:

• 我在概念上所做的是否正确?
• 有没有更正确/更有效的方法来实现它?

解决方案

您关于返回 Object 实例的函数的概念是有效的，但您的实现非常脆弱，因为它只设置为使用特定的属性.继续阅读有关创建实例的各种方法和返回对象的更灵活方法的更多详细信息...

var a = Obj; 不会创建新对象.它只是为a 分配现有对象Obj 的内存地址.

var myObj = {};//创建对象实例并将内存位置存储在 myObj 中var a = myObj;//没有创建新对象.a 和 myObj 指向同一个对象console.log("'a' 和 'myObj' 是否都指向同一个对象?", a === myObj);//真

如果你想设计一个单一的对象，然后制作更多的对象，你需要能够创建一个对象的实例".你不能用对象字面量直接做到这一点:

var myObj = {someProp:10};var myNewObj = new myObj();//失败，因为无法实例化对象字面量

但是，您可以使用 Object.create() 方法，它将您的 Obj 概念付诸实践::>

//创建对象实例并将内存位置存储在 myObj 中var myObj = {someProp: "默认",//方法"只是以函数为值的属性一些方法:函数(输入){//||下面的语法允许方法的默认值//如果没有参数传递给方法.this.name = 输入 ||默认";}};//创建一个新的 Object 实例并将 myObj 设置为实例的原型.//这意味着新实例将从该原型继承:var a = Object.create(myObj);控制台日志(a.someProp)；//默认";a.someProp = "特定的东西";a.someMethod("测试");myObj.someMethod();console.log(a.name, myObj.name);//"测试" "默认"console.log(a.someProp, myObj.someProp);//特定的东西"，默认"

可以使用 new 运算符 和一个构造函数:

function foo(){this.someProp = "东西";}var a = new foo();//foo 的唯一实例var b = new foo();//独立且不同的 foo 实例a.someProp = 10;b.someProp = 20;console.log(a.someProp, b.someProp);//10 20

或者，new 运算符和 类:

class foo{构造函数(val){this.someProp = val;}}var a = new foo(10);//foo 的唯一实例var b = new foo(20);//独立且不同的 foo 实例console.log(a.someProp, b.someProp);//10 20

I just cleared my mind on JavaScript objects and my question is really simple for most of the people here. I feel comfortable with the JavaScript object literal notation like:

var Obj = {
    /**
     * @type {string}
     */
    name: '',

    /**
     * setName
     * Set the `name` property.
     * 
     * @param param
     */
    set setName (param) {
        this.name = param;
    }
};

The only limit I found is that if I want to create two completely separate objects in the same page, with this notation I can't.

var a = Obj;
a.setName = "John";

var b = Obj;
b.setName = "Peter";

// OUTPUT
// a.name -> Peter
// b.name -> Peter

Set var whatever = Obj is just useless, 'cause it doesn't instantiate n separate objects and it just overwrites the code above. Using new keyword such as var a = new Obj doesn't work neither (probably I'm using it in the wrong way?). The solution I came up with is returning the object inside a function, like:

function Obj() {
    return {
        /**
         * @type {string}
         */
        name: '',

        /**
         * setName
         * Set the `name` property.
         *
         * @param param
         */
        set setName (param) {
            this.name = param;
        }
    }
}

This way I can create two different objects and correctly access to their properties and methods:

var a = Obj();
a.setName = "John";

var b = Obj();
b.setName = "Peter";

// OUTPUT
// a.name -> John
// b.name -> Peter

So, my question are:

• Is what I've done conceptually right?
• Is there a more correct/efficient way to achieve it?

解决方案

Your concept of a function that returns an Object instance is valid, but your implementation is very brittle because it is only set up to work with specific properties. Read on for more details on various ways to create instances and a more flexible way to return objects...

var a = Obj; doesn't create a new object. It just assigns a the memory address of the existing object Obj.

var myObj = {}; // Object instance is created and memory location is stored in myObj 
var a = myObj;  // No new object is created. a and myObj point to the same object
console.log("Are 'a' and 'myObj' both pointing to the same object?", a === myObj);  // true

If you want to design a single object and then make more of that object, you need to be able to create "instances" of an object. You can't do that directly with an object literal:

var myObj = {
  someProp:10
};

var myNewObj = new myObj(); // Fails because an object literal can't be instantiated

But, you can do it with the Object.create() method, which takes your Obj concept to fruition:

// Object instance is created and memory location is stored in myObj 
var myObj = {
  someProp: "default",
  
  // "Methods" are just properties with functions as their value
  someMethod: function(input){
    // The || syntax that follows allows for a default value for the method
    // if no argument is passed to the method.
    this.name = input || "default";
  }
}; 

// Create a new Object instance and set myObj as the prototype of the instance.
// This means that the new instance will inherit from that prototype:
var a = Object.create(myObj);  

console.log(a.someProp);  // "default";
a.someProp = "something specific";
a.someMethod("Test");
myObj.someMethod();
console.log(a.name, myObj.name);             // "Test" "default"
console.log(a.someProp, myObj.someProp);     // "something specific", "default"

Instances can be explicitly made with the new operator and a constructor function:

function foo(){
 this.someProp = "something";
}

var a = new foo(); // Unique instance of foo
var b = new foo(); // Separate and distinct instance of foo

a.someProp = 10;
b.someProp = 20;
console.log(a.someProp, b.someProp);  // 10 20

Or, the new operator and a class:

class foo{
  constructor(val) {
    this.someProp = val;
  }
}

var a = new foo(10); // Unique instance of foo
var b = new foo(20); // Separate and distinct instance of foo   

console.log(a.someProp, b.someProp);  // 10 20

这篇关于JavaScript 对象和文字符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！