javascript - 直接为原型(prototype)的属性赋值与.extend 的区别

Question

我遇到了两种在 Java 脚本中编写相同代码的风格，并且想了解这两种风格的优点或缺点。

如下:

options = $.extend({
    property1 : value1,
    property2 : value2,                
}); 

VS

options = {
    property1 : value1,
    property2 : value2,
};

在谷歌搜索时我发现了以下内容: 1.0jQuery.extend( target [, object1 ] [, objectN ] ) 如果传入其他对象，则该对象将接收新属性；如果它是唯一参数，则该对象将扩展 jQuery 命名空间。

但是谁能帮我理解:1.使用$.extend有什么好处？2.上面这一行是什么意思: 如果它是唯一的参数，它将扩展 jQuery 命名空间。

希望以上有道理!

Answer 1

您使用的第一种方法:

options = $.extend({
                property1 : value1,
                property2 : value2,                
            }); 

根据Jquery Documentation

如果仅向 $.extend() 提供一个参数，则意味着目标参数被省略。在这种情况下，jQuery 对象本身被假定为目标。通过这样做，您可以向 jQuery 命名空间添加新函数。这对于希望向 JQuery 添加新方法的插件作者非常有用。

说明

您将收到的选项是 jquery 对象本身。您的结果 option 对象将表现为 Jquery 对象，并且您将无法直接访问键 property1 和 property2。因为您已经扩展了 $ 即 jQuery 对象本身。

然后，您可以像使用 $ 一样使用选项来执行 DOM 操作或 JQuery 提供的其他功能。扩展的目的是向现有对象添加额外的 Prop 。但如果您不提供目标，它会将其假定为 Jquery 对象本身。

现在，

  options.trim(" Hello World "); // outputs Hello World without 
                                //leading or trailing spaces

附注行为就像$

基本对象分配

options = {
        property1 : value1,
        property2 : value2,
    };

它只是基本的 Javascript 对象，行为正常。与上述场景不同，您可以使用点运算符访问属性。

如果将空白对象作为第一个参数传递，则可以实现与上述相同的行为

options = $.extend({}, {
                    property1 : value1,
                    property2 : value2,                
                });

现在它将像普通对象一样运行，因为您刚刚将空白目标对象与新属性合并。