JavaScript Design Patterns

Before you learn JavaScript design patterns, you need to understand some of the relevant knowledge, object-oriented basics, this and other important concepts, as well as mastering some functional programming skills.

JS polymorphic

Polymorphic thinking: Actually separating "what to do" from "who Does it".
Cases:

var makesound = function (animal) {    if (animal.show instanceof function) {        animal.show ();}    } var dog = {    show:function () {        console.log (' barking ');}    } var cat = {    show:function () {        console.log (' Meow meow ');}    } MakeSound (dog); Output: Barking MakeSound (CAT); Output: Meow Meow

JS Package

Cases:

var MyObject = (function () {    var name = ' Hello ';    return {        getname:function () {            return name;}}    }) (); Console.log (Myobject.getname ()); Helloconsole.log (Myobject.name); Undefined

The point of this:

1. When a function is called as a method of an object, this points to the object

var obj = {    name: ' Hello ',    getname:function () {        console.log (this===obj);//true        Console.log ( THIS.name); Hello    }}obj.getname ();

2. When a function is called as a normal function, this points to the global object, which is the Window object

Window.name = ' Globalname '; var getName = function () {    return this.name;}; Console.log (GetName ()); globalname//or window.name = ' globalname '; var myObject = {    name: ' Hello ',    getname:function () {        return this.name;    }}; var getName = Myobject.getname;console.log (GetName ()); Globalname

3. Constructor call, this object in the constructor is pointed to the returned

var myClass = function () {    this.name = ' Class ';} var obj = new MyClass (); Console.log (Obj.name); Class

4.function.prototype.call or Function.prototype.apply call, you can dynamically change the this of the incoming function

var obj1 = {    name: ' Hello ',    getname:function () {        return this.name;    }}; var obj2 = {    name: ' Hi '};console.log (obj1.getname ());//helloconsole.log (Obj1.getName.call (OBJ2));//hi

Call and apply
The function is exactly the same, the difference is only in the form of incoming parameters.
Apply accepts two parameters, the first parameter specifies the pointer to the this object in the function body, and the second parameter is an indexed collection, which can be an array or an array of classes.

var func = function (a,b,c) {    console.log ([a,b,c]);//[1,2,3]}func.apply (null,[1,2,3]);

In this code, parameters 1, 2, and 3 are placed in the array to pass in the Func function, corresponding to a, B, C, the first parameter is NULL, the function body this point to the default host object, and the browser is window.
The number of arguments passed in the call is not fixed, the first parameter is the this point in the body of the function, and from the second parameter, each parameter is passed into the function sequentially.

Use of call and apply
1. Change this point

var obj1 = {    name: ' objname '};window.name = ' window '; var getName = function () {    console.log (this.name);}; GetName (); Windowgetname.call (OBJ1); ObjName

2. Ways to borrow other objects

var A = function (name) {    this.name = name;}; var B = function () {    console.log (arguments);    A.apply (this,arguments);}; B.prototype.getname = function () {    return this.name;}; var B = new B (' Hello '); Console.log (B.getname ()); Hello

JavaScript Design Patterns