Angular: Empty Fiddle

http://angularjs.org/

by boneskull

HTML

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-controller="MyCtrl">
    num: {{num}}<br/>
    obj.str: {{obj.str}}
    <div ng-controller="MyOtherCtrl">
        num: <input type="text" ng-model="num"/>        <br/>
        obj.str: <input type="text" ng-model="obj.str"/>
    </div>
</div>

JavaScript

var Foo = function Foo() {
};

Foo.prototype.num = 1;
Foo.prototype.obj = {
    str: 'string'
};

var Bar = function Bar(foo) {
    angular.extend(this, foo);
};

Bar.prototype = Object.create(Foo.prototype);

var foo = new Foo();
var bar = new Bar(foo);

// foo is a Foo
console.log(foo);

// bar is a Bar, but is built from foo.
console.log(bar);

// in fact it shares the exact same objects
console.log(bar.obj === foo.obj); // true

bar.obj.str = 'asshat';

// reference sticks
console.log('asshat' === foo.obj.str);

bar.num = 2;

// primitives don't keep their reference
console.log(1 === foo.num); // true
console.log(2 === bar.num); // true

// angularjs example:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.num = 1;
    $scope.obj = {
        str: 'string'
    };
}

function MyOtherCtrl($scope) {
}

// modify the two text boxes in the example and see how the obj reference sticks, but the primitive does not.