2014-09-04 39 views
0

这两种方法有什么区别?我想更好地理解Jquery和JavaScript。先谢谢了!这两种JavaScript/JQuery技术有什么区别?

 /** 
     * What is the difference between these two techniques? 
     */ 

     /* Using JQuery Extend */ 

     var names = {name1 : 'Nicholas', name2: 'Bobby'} 
     var ages = {age1 : '27', age2: '32'} 
     var profile = $.extend(names, ages); 
     console.log(profile.name1, profile.age1) 

     /* By filling a blank object with the combined dataset */ 

     var names = { name1 : 'Nicholas', name2 : 'Bobby'} 
     var ages = { age1 : '27', age2 : '32'} 
     var profile = {}; 
     profile.names = names; 
     profile.ages = ages; 
     console.log(profile.names.name1, profile.ages.age1) 
+0

两者都完全不同! – 2014-09-04 19:21:45

+2

看看每个的结果。你应该很容易看到它们有何不同。 – 2014-09-04 19:21:48

+0

您是否阅读过[jQuery.extend](http://api.jquery.com/jquery.extend/)文档? *“将两个或更多对象的内容合并到第一个对象中。”*另一个只是将对象分配给对象属性。 – 2014-09-04 19:27:04

回答

1

看看GitHub的jQuery.fn.extend()Source: 它解析给定的对象并制作整个对象的deep copy。所以,当对象具有子对象时,它们也被深度复制。 用法说明here如下:

说明:合并两个或多个对象的内容一起放入第一个对象。

var names = { name1 : 'Nicholas', name2 : 'Bobby'} 
    var ages = { age1 : '27', age2 : '32'} 
    var profile = {}; 
    profile.names = names; 
    profile.ages = ages; 

根本不会复制。它将这些对象放在一个super - 或wrapping - 对象中。

非常不同的是,在extending之后,两个对象都是独立的,第二个方法不是。看到这个Fiddle。新对象仅包含引用而不包含deep copy旧对象。

+0

感谢您的简单易懂的答案! – NicholasAbrams 2014-09-05 20:22:26

0

jQuery扩展方法结合了名称和年龄对象。你的第二个例子用前面的对象作为关键字创建一个新对象。

2

$.extend合并两个对象。第一代码的结果是包含这两个对象的所有属性的单个对象:

{name1 : 'Nicholas', age1: '27', name2: 'Bobby', age2: '32'} 

它还修改其第一个参数作为副作用。所以这个结果将在profilenames。要防止第一个参数被修改,请使用$.extend({}, names, ages)

要访问其中的一个值,可以使用profile.name1profile.age2

你的第二个代码创建一个包含在其中的前两个对象不同属性的新对象:

{ names: {name1 : 'Nicholas', name2: 'Bobby'}, 
    ages: { age1 : '27', age2 : '32'} 
} 

要访问的一个值这个,你会用profile.names.name1profile.ages.age2