jquery 확장 대 각도 확장
이 두 확장 기능의 차이점은 무엇입니까?
angular.extend(a,b);
$.extend(a,b);
jquery.extend는 잘 문서화되어 있지만 angular.extend에는 세부 정보가 없으며 주석에는 답변이 없습니다. ( https://docs.angularjs.org/api/ng/function/angular.extend ).
angular.extend도 딥 카피를 제공합니까?
angular.extend하고 jQuery.extend있습니다 매우 유사합니다. 둘 다 하나 이상의 소스 객체에서 대상 객체 로 얕은 속성 복사를 수행 합니다. 예를 들어 :
var src = {foo: "bar", baz: {}};
var dst = {};
whatever.extend(dst, src);
console.log(dst.foo); // "bar"
console.log(dst.baz === src.baz); // "true", it's a shallow copy, both
// point to same object
angular.copy깊은 사본을 제공합니다 .
var src = {foo: "bar", baz: {}};
var dst = angular.copy(src);
console.log(dst.baz === src.baz); // "false", it's a deep copy, they point
// to different objects.
돌아 가기 extend: 한 가지 중요한 차이점은 jQuery를 extend사용하면 하나의 개체 만 지정할 수 있다는 점 입니다.이 경우 jQuery자체가 대상입니다.
공통점 :
얕은 사본입니다. 따라서 객체를 참조
src하는 속성이있는 경우 동일한 객체 를 참조 하는 속성 을 얻습니다 (객체의 복사본이 아님).pdstp둘 다 대상 개체를 반환합니다.
둘 다 여러 소스 개체를 지원합니다.
둘 다 여러 소스 객체 를 순서대로 수행 하므로 둘 이상의 소스 객체에 동일한 속성 이름이있는 경우 마지막 소스 객체가 "승리"합니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>Extend!</title>
</head>
<body>
<script>
(function() {
"use strict";
var src1, src2, dst, rv;
src1 = {
a: "I'm a in src1",
b: {name: "I'm the name property in b"},
c: "I'm c in src1"
};
src2 = {
c: "I'm c in src2"
};
// Shallow copy test
dst = {};
angular.extend(dst, src1);
display("angular shallow copy? " + (dst.b === src1.b));
dst = {};
jQuery.extend(dst, src1);
display("jQuery shallow copy? " + (dst.b === src1.b));
$("<hr>").appendTo(document.body);
// Return value test
dst = {};
rv = angular.extend(dst, src1);
display("angular returns dst? " + (rv === dst));
dst = {};
rv = jQuery.extend(dst, src1);
display("jQuery returns dst? " + (rv === dst));
$("<hr>").appendTo(document.body);
// Multiple source test
dst = {};
rv = angular.extend(dst, src1, src2);
display("angular does multiple in order? " +
(dst.c === src2.c));
dst = {};
rv = jQuery.extend(dst, src1, src2);
display("jQuery does multiple in order? " +
(dst.c === src2.c));
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
})();
</script>
</body>
</html>
이전 답변에서 언급되지 않은 두 가지 미묘한 차이가 있습니다.
jQuery's .extend() allows you to conditionally add key,value pairs, only if the value is defined. So in jQuery, this: $.extend({}, {'a': x ? x : undefined}); will return {} in case x is undefined.
In Angular's .extend() however, this: angular.extend({}, {'a': x ? x : undefined}); will return {'a': undefined}, even if x is undefined. So the key will be there, no matter what.
This could be a good or a bad thing, depending on what you need. Anyway this is a difference in behavior between the two libraries.
The 1.0.7 angularjs build states that the extend & copy methods no longer copy over the angularjs internal $$hashKey values.
See release notes @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md
angular.copy/angular.extend: do not copy $$hashKey in copy/extend functions. (6d0b325f, #1875)
A quick test of the angular.copy in Chomre dev tools method shows that it does do a deep copy.
x = {p: 3, y: {x: 5}}
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z = angular.copy(x);
Object {p: 3, y: Object}
z
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z.y.x = 1000
1000
x
Object {p: 3, y: Object}
p: 3
y: Object
x: 5
__proto__: Object
__proto__: Object
z
Object {p: 3, y: Object}
p: 3
y: Object
x: 1000
__proto__: Object
__proto__: Object
angular.extend on the other hand does a shallow copy.
.extend() in AngularJS works similarly to jQuery's .extend()
http://jsfiddle.net/Troop4Christ/sR3Nj/
var o1 = {
a: 1,
b: 2,
c: {
d:3,
e:4
}
},
o2 = {
b: {
f:{
g:5
}
}
};
console.log(angular.extend({}, o1, o2));
console.log(o1);
console.log(o2);
참고URL : https://stackoverflow.com/questions/16797659/jquery-extend-vs-angular-extend
'IT박스' 카테고리의 다른 글
| open ()을 위해 다른 디렉토리에있는 파일의 전체 경로를 전달해야합니까? (0) | 2020.11.27 |
|---|---|
| New-WebServiceProxy를 통해 웹 서비스에 추가 HTTP 헤더를 보낼 수 있습니까? (0) | 2020.11.27 |
| HTTPS 백엔드 서버와 통신하도록 Apache 서버를 구성하는 방법은 무엇입니까? (0) | 2020.11.27 |
| C ++ std :: chrono :: time_point를 long 및 back으로 변환하는 방법 (0) | 2020.11.27 |
| 사용자 10102와 현재 프로세스 모두 android.permission.READ_PHONE_STATE가 없습니다. (0) | 2020.11.27 |