JavaScript Basics (Fifth day)

Source: Internet
Author: User
Tags array example shallow copy

the road long its repair far XI, I will go up and down and quest! JS Object-oriented and profound, deep inside, will not go and unfavorable, eventually into a generation guru.

Appetizer Dishes

Does the duplicate declaration of a variable have an effect?
var a = {};
var A;
A

A little inspiration?

Array Object functions
[] {} function X () {}
New Array () New Object () New X ()

Small problem in front
(1) function does not specify a return value, what is returned by default? Undefined
(2) JS has a block scope? Only function body has scope
(3) What is the difference between function A () {} A and a () and new A ()? A is a reference, a () is a method call, and new A () is used to instantiate a object with a constructor

The legendary self-modifying function
function A () {
Console.log (' A ');
A = function () {
Console.log (' B ');
};
}
A ();
A ();

(4) Private methods and variables?
function A () {
Private B;
Private C;
function privated () {}
}
(5) Static methods and variables?
var a = {};
Function B () {};
A.aa= ' AA ';
b.bb= ' BB '
Console.log (A.AA);
Console.log (B.BB);
Console.log (new B (). BB);

(6) Examples of methods and variables?
function A () {}
var a = new A ();
a.b= ' BBB ';
Console.log (A.B);
Console.log (A.B);

(4) (5) (6) Summarize Array example???
Array.Length---> Static variables
Array.isarray ()---> Static method
[1,2,3].push (4)---> Example method

(7) A sentence to explain the closure? Open the scope of the function inside the function (point a variable to the outside) to access the private methods and variables inside.
var Getvalue,setvalue;
(function () {
var num = 0;
GetValue = function () {
return num;
}
SetValue = function (n) {
num = n;
}
})();

(8) function A () {this.aa= ' AA '; return {aa: ' AAAA '}}; A (). AA; return value???
function A () {this.aa= ' AA '; return {aa: ' AAAA '}}; New A (). AA; return value???
Remember, keep in mind that it is important to remember that when a function returns a value that is an object, returning that object, new or direct call, is returning the object.


Business:
var a = {}; In this case, the object constructor is called implicitly;
var arr = []; In this case, the array constructor is called implicitly;

var B = {
BB: ' BB ',
Bbb:function () {
return this.bb;
}
};

Function C () {
This.cc= ' CC ';
This.ccc=function () {
return this.cc;
}
}

Ask above, B and C function basically the same, the difference of the way of writing each other advantages and disadvantages??
B Advantages:
(1) B simple and intuitive, directly create
B Cons:
(1) b not flexible enough
C Advantages
(1) C can write private methods and variables
(2) C Create an instance only when new
(3) C can pass in the parameter when the new instance
(4) C can return
(5) C can be written in a number of free, such as the above self-modification function
...... Too many advantages ....
C Disadvantages
(1) The disadvantage of C is the need for new, good trouble, easy to misuse. For example, the following examples:
function A () {
this.b = ' B ';
return {c: ' C '};
}
var aa = new A ();
Console.log (AA.B); Undefined


-----------------------------------constructor----------------------------------------//

Constructor property (This property is actually a reference to the constructor function used to create the object)

function A () {}
A.constructor//function function () {[native code]}
var aa = new A ();
Aa.constructor; function A () {}

var b= {};
B.constructor; function Object () {[native code]}


What are the built-in constructors for JavaScript?
Object
Array
Boolean
Number
String
Date
Regexp
Error
Function

Because object is the parent object of all the objects in JavaScript, so?
var a = {}; Even if an empty object, there is the ToString (), ValueOf () method;
function A () {};
A.valueof (); function A () {}
A.tostring (); "Function A () {}"


-----------------------------------prototype----------------------------------------//

Each "function" has a prototype property, which stores the prototype object.
(1) When a function is defined, it is created, and the declaration creates a
(2) The initial value of the prototype is "empty object"
(3) Properties of the prototype property "constructor function"
function A () {} a.prototype;//{};
function A () {} typeof A.prototype; "Object"

The priority of its own property is higher than the prototype attribute (find it on the prototype chain, find your own, then find your father)
function A () {
this.b= ' xx ';
};
A.prototype = {
B: ' BB ',
C: ' CC '
};
var aa =new A ();
Aa {b: "xx", C: "CC"}

__proto__???

var parent = {
B: ' BB ',
C: ' CC '
}

function child () {};
Child.prototype = parent;

var ren = new Child ();
Console.log (ren);

Questions? How to get a prototype object from Ren on this instance object???

Console.log (Ren.prototype); Undefined Why Undefiend???

(1) Find the constructor
Ren.constructor
(2) Find the prototype of the constructor again
Ren.constructor.prototype
Console.log (Ren.constructor.prototype = = = parent); True?? Damn, I didn't measure it.
You can do that.
Console.log (ren.__proto__ = = = parent); True

Question: __proto__ and prototype the same??? It's not exactly the same.

__proto__ is a property of the object instance lookup prototype, and prototype is the property of the constructor function.


-----------------------------------Inheritance (most complex, most profound)-----------------------------------//

Prototype pits
(1) When we completely replace the prototype, it may trigger some kind of anomaly in the prototype chain.
(2) The Prototype.constructor attribute is unreliable

function Dog () {
This.tail = true;
}
var tom = new Dog ();
Dog.prototype.say = function () {
Return ' Woof ';
}
Console.log (Tom.say ()); Woof
Console.log (Tom.constructor); Dog ()
Console.log (Tom.constructor.prototype.constructor); Dog ();
Console.log (typeof Tom.constructor.prototype.tail); Undefined

Dog.prototype = {Paws:4,hair:true};
Console.log (Tom.say ()); It's a problem!!!! Because __proto__

The wording of inheritance

(1) only inherit the prototype, say the shortcomings??
function A () {};
A.prototype.name= ' shape ';
Function B () {};
B.prototype = A.prototype;
B.prototype.constructor=b;
Function C () {};
C.prototype = B.prototype;
C.prototype.constructor=c;

(2) Temporary constructor, new F () the first relatively good inheritance notation

function A () {};
A.prototype.name= ' shape ';
function f () {};
F.prototype = A.prototype;
var ff = new F ();
Console.log (Ff.name); Shape

Humans invented this method, and the mature JS framework is ubiquitous in this way.
function Extend (child,parent) {
var f = function () {}
F.prototype = Parent.prototype;
Child.prototype = new F ();
Child.prototype.constructor=child;
Child.uber = Parent.prototype; Add a reference to the parent prototype
}


(3) attribute copy the second kind of inheritance notation

function Extend2 (child,parent) {
var p = parent.prototype;
var c = Child.prototype;
for (var i in P) {
C[i] = P[i];
}
C.uber = p;
}

Say shortcomings?? Tip: Object types (functions and arrays) are reference passes, and the function itself is not created again.

var a = function () {};
var B = function () {};
A.prototype.arr = [n/a];
Extend2 (B,a);
B.prototype.arr.push (4,5,6);
Console.log (A.prototype.arr); [1, 2, 3, 4, 5, 6]

Extension: Shallow copy and deep copy inheritance, Mature JS Framework everywhere this method

(4) Inheritance of object between objects () the third kind of inheritance notation

A good general notation
function Extendcopy (p) {
var c = {};
for (var i in P) {
C[i] = P[i];
}
C.uber = p;
return C;
}

Author Douglas Crockford
function Object (o) {
function f () {};
F.prototype = O;
n = new F ();
N.uber = O;
return n;
}

Source: JavaScript Authoritative Guide 122 page Excellent example
function inherit (p) {
if (p = = = null) throw TypeError ();
if (object.create) {
Return Object.create (P);
}
var t = typeof P;
if (t!== ' object ' && t!== ' function ') {throw TypeError ();}
function f () {};
F.prototype = p;
return new F ();
}
That's a lot of inheritance benefits.
var a = Object.create ({});

(5) Multiple inheritance

function multi () {
var n = {};
for (var j=0; j<arguments.length; J + +) {
var stuff = Arguments[j];
for (var i in stuff) {
N[i] = Stuff[i];
}
}
return n;
}
var a = {aa: ' AA ', AAA: ' AAA '};
var b = {bb: ' BB ', BBB: ' BBB '};
var c = multi (A, b);

Console.log (c); {aa: "AA", AAA: "AAA", BB: "BB", BBB: "BBB"}

(6) Mixed inheritance

Function triangle (o,s,h) {
function f () {};
F.prototype = O;
n = new F ();
N.uber = O;

N.S = s;
N.h = h;

return n;
}

(7) constructor borrowing inheritance

Beginner's Play
function A () {
This.aa= ' AA ';
};
Function B () {
A.apply (this,arguments);
};
var bb = new B ();
Console.log (BB.AA); Aa

Advanced Gameplay
function A () {
This.aa= ' AA ';
};
Function B () {
This.extend = function () {
var arg = [].slice.call (arguments,1);
(Arguments[0]). Apply (This,arg);
};
};
var bb = new B ();
Bb.extend (a);
Console.log (BB.AA); Aa


Conclusion:
The inheritance is a combination of the writing, enough to pervert it!!! JS inheritance has at least dozens of kinds of writing
function Child () {
Parent.apply (this,arguments);
}
Extend2 (child,parent);

Name space
Initialize Branch
Deferred execution
Chained calls
Design Patterns
Single case
Factory
Door
Decorative Device
Observers
Publish a subscription

Now come to realize the following words:

the road long its repair far XI, I will go up and down and quest! JS Object-oriented and profound, deep inside, will not go and unfavorable, eventually into a generation guru.

JavaScript Basics (Fifth day)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.