1. Methods:
// Create an object
var obj = {name: "Monkey", age: 18};
Properties // object may be an object
obj.brother = {name: "Pig", Age: 28};
//console.log (obj.brother.name);
properties // object can also be a function of
time // when an object's properties is a function, we call this function is the object of this method
// function and methods differ only on the call, essentially no difference
obj.sayName = function () {
console.log ( "Monkey King is the Hello Hello everybody I ~ ~ ~");
};
//console.log(obj.sayName);
// when we call object when the function, we say we call the object's method
//obj.sayName ();
var obj2 = {
name: "sand monk",
Age: 38,
sayName: function () {
console.log ( "I am an old sand - ~ ~ ");
}
}
obj2.sayName ();
2. Scope:
/ *
* Scope (the Scope)
* - means the scope is simply the effect of a variable range
* - is divided into two kinds of scopes in JS:
* globally scoped
* Function scope 2.
*
* - Global scope:
* 1. All code written directly in the script tag in the global scope
* 2. create a global scope when you open the page, destroyed when the page is closed
* 3. there is a global object window global scope ,
* window represents a browser window,
* in the global variable will be created in the domain as property holds the window object
* methods in the global created in the domain will function as a window object stored
* 4. in the global scope creating variables are global variables can be accessed anywhere in the page
* /
var a = 123;
var B = 456;
//console.log(window.b);
//console.log(window.c);
function fun () {
the console.log (B);
the console.log ( "I'm in a global function fun ....");
}
fun ();
// window .fun ();
3. A variable declared in advance:
// If you do not write var, directly assigning a variable, add the equivalent of property to the window object
//window.a = 10;
// A = 10;
/ *
* declare variables in advance
* - variable declared using the var keyword , it will be declared before all the code execution, but not assigned
* assignment executed until execution of the code will be assigned if
* - if not applicable var keyword to declare variables, there will not be declared in advance of properties
*
* function declare in advance
* - using a function function declaration created will be created before any code is executed,
* so we can go call the function before the function declaration
* - functions using function expressions created, do not have this feature, so it can not be before calling Create
* /
//console.log("a = "+ a);
var a = 10;
// Fun ();
//console.log(fun2);
// use the function to create a function declaration
function fun () {
console.log ( "I am a fun function ....");
}
// create a function using a function expression
var fun2 = function () {
console.log ( "-----> I fun2 .... ");
};
4. The scope function:
/ *
* Function scope
* - function scope can be understood as a small scope of the global
* - function scope is created when the function is called, destroyed at the end call
* Each call to the function will create a new function scope
* - in function scope can have access to global variables,
* but not accessible to the global scope of a function of variables
* variables created inside a function if you do not write var, it will become the global variable
* - when when we use a variable in a function, it will first look for in their scope,
* if used directly, if not then go on to find a scope,
* find use, did not find it to continue looking, until you find the global scope
* If still no global scope, the error ReferenceError
* - also applies in the function scope variables and functions declared in advance
*
* /
var a = "Global A";
function Fun () {
var a = "-> Function A";
// if you want to access the global variable in a function scopes can be accessed by the window object
console.log (window.a) ;
}
// Fun ();
a = 20 is;
/ *
* use of var keyword declared within the function will be declared in advance
* performs its declaration code is executed before all
*
* function is used within the function function declaration created, will be created before the execution of all code
* /
function fun2 () {
FUN3 ();
//console.log(a);
// var a = 10;
function FUN3 () {
the console.log ( "I am ... an internal function fun2");
}
}
fun2();
5. Practice
A = 123 var;
function Fun () {
Alert (A);
A = 456;
}
Fun (); 123 //
Alert (A); 456 //
var A = 123;
/ *
* equivalent parameter in the definition of a function declaration variables corresponding to
* /
/ * function Fun (a) {
Alert (a);
a = 456;
}
Fun (); // undefined
Alert (a); 123 // * /
var a = 123;
function Fun (A) {
Alert (A);
A = 456;
}
Fun (123); // 123
Alert (A); // 123
6.this usage
// create a variable name
var name = "global in name";
/ *
* each function call, the browser will hide an object as a parameter passed into the function
* This function execution context object is an object, we can to refer to the object by this
* depending on the form of the function call is different values this is different:
* 1. when calling in the form of a function, this is always the window
when the form * 2. method call, who calls this is who
* /
// create a function
function Fun () {
/ *
* we want the function to who to call, you can output whose name attribute
* when the window is called, the output of the window.name
* obj outputs obj.name when calling
* when the call is output obj2 obj2.name
* /
the console.log (this.name);
//console.log(this == obj);
}
// Create an object
var obj = new new Object ();
obj.name = " Monkey King ";
obj.sayName = Fun;
// create an object
var obj2 = new Object();
obj2.name = "猪八戒";
obj2.sayName = fun;
//console.log(obj.sayName == fun);
//window.fun();
//obj.sayName();
//obj2.sayName();
//obj.sayName();
//fun();
//obj.sayName();
//fun();
//window.fun();
//obj2.sayName();
var obj3 = {
name:"沙和尚",
age:38,
sayName:function(){
function test(){
console.log(this.name);
}
test();
}
};
obj3.sayName();
7. Creating an object using the factory method
/ *
* Using the factory method to create the object
* /
function createPerson (name, Age, Gender, address) {
// create an object
var obj = new new Object ();
// add attributes to the object
obj.name = name;
obj Age = .age;
obj.gender = Gender;
obj.address = address;
obj.sayName = function () {
console.log ( "Hello everyone, I am:" + this.name);
};
// return the object
obj return;
}
// call the function
var person = createPerson ( "Monkey", 18, "M", "Huaguoshan");
var = PERSON2 createPerson ( "White Skeleton", 16, "female", "bones hole") ;
8. The use of a constructor to create the object
/ *
* Constructor (constructor)
* constructor is designed to create the object function
* constructor is an ordinary function, except that the constructor needs to be invoked by the new keyword
* constructors are generally capitalized
*
* process execution constructor:
* 1. Create a new object
* 2. the newly created objects in the set as a function of the this
* function is performed row by row 3.
* 4. the new object returned as a return value
*
* If you call the constructor of the form, this is the newly created object
*
* constructors we can call it a class
* use an object with a constructor to create, we have a class of objects called
* created by the constructor object, we call this object is an instance of the class
*
* /
// create a human constructor
function Person (name, age) {
// By this, add attributes to the new object
this.name = name;
this.age = Age;
this.sayName = function () {
the console.log (this.name);
};
}
function Dog () {
}
var p = new Person ( "Monkey", 18 is);
var = new new PERSON2 the Person ( "sand monk", 38 is);
var = new new Dog Dog ();
//console.log(person);
//person2.sayName () ;
var a = new new the Person ();
var new new Dog B = ();
/ *
* instanceof
* - can check whether an object is an instance of a class (constructor) of
* - syntax: instanceof Object constructor
* /
// Console .log (the instanceof the Person B);
/ *
* All objects are descendants of Object
* /
//console.log(a instanceof Object);
// Create a human constructor
function the Person (name, Age) {
// By this, add attributes to the new object
this.name = name;
this.age = Age;
// add a new object to the sayName ( ) method
this.sayName = Fun;
}
/ *
* in the constructor we add to each object a sayName () method,
* and this method is created in the constructor, the constructor will create each execution a new sayName () method
* each object sayName () methods are different, there are a few objects have several sayName ()
* but these features and functions are exactly the same, so we do not need to create so much out exactly the same function
* /
/ *
*-defined functions to the global scope, can indeed solve the problem, but it will define the scope will lead to a global namespace global scope of contamination.
* We also lead to unsafe operation of the program
* /
// outside the defined function to the constructor
function Fun () {
the console.log (this.name);
};
// Create a the Person
var = new new per the Person ( "Monkey "18 is);
var = new new Per2 the Person (" Tang ", 16);
var per3 = new Person("玉兔精",16);
//console.log(per.sayName == per2.sayName);
per3.sayName();
9. Prototype 1
/ *
* Prototype (prototype)
* - Every time we create a browser function will add a property to the function
* called the prototype, this property is an object corresponding
* this object is what we call prototype object.
* - if only in the form of a function to call the function, the prototype object does not have any effect
* - When you call a function in the form of the constructor, the objects that it created will have a hidden attribute
* perform the function prototype object, we can access this object by __proto__
*
* - all the same type of object they share the same prototype object, the prototype object is the equivalent of a public area
* - when we went to call an object's properties or when the method, it will go looking for the object itself,
* if the find is used directly, if not find the prototype object to find, if there is value in the prototype of the prototype returns
* If there is no prototype, the prototype go prototype seek, to find the direct use and so on. . .
* Note: The prototype prototype Object is null, it will always find a prototype of Object,
* if he is still not there, undefined is returned
* - we can be unified common to add an object property or method to prototype,
* so that we do not add more duplicate property or method, it will not pollute the global scope
* /
function MyClass () {
}
// function to Add a prototype object attribute
MyClass.prototype.hello = "hello";
MyClass.prototype.fun = function () {
Alert ( "I prototype Fun");
};
// Create an instance of MyClass
var mc new new MyClass = ();
var = MC2 of new new MyClass ();
var = MC3 new new MyClass ();
mc.hello = "MC of hello";
//console.log(mc3.__proto__ == MyClass.prototype)
// console.log (mc2.hello);
//mc2.fun ();
// create a human constructor
function the Person (name, Age) {
// By this, add attributes to the new object
this.name = name;
this.age = Age;
}
// was added to the Person prototype sayName ()
Person.prototype.sayName = function () {
the console.log (this.name);
};
var = new new per Person ( "Monkey", 18 is);
var = Per2 new new Person ( " Monkey ", 16);
var = new new Per3 the Person (" rabbit fine ", 16);
per3.sayName ();
10. Prototype 2
// Create a human constructor
function Person (name, Age) {
// By this, add attributes to the new object
this.name = name;
this.age = Age;
}
// Add to the prototype sayName the Person ( )
Person.prototype.sayName = function () {
the console.log (this.name);
};
// Create a Person instance
var per = new Person ( "Monkey", 18);
// when we print an object , often console output [object object]
// in this case the content output is actually object toString () method returns the value of
var = per.toString STR ();
//console.log(str);
// check is there toString per the
// returns true if the property will be in the prototype object, use in
//console.log("toString "in per);
//console.log(per.hasOwnProperty("toString"));
//console.log(per.__proto__.__proto__.hasOwnProperty("toString "));
/ /console.log(Object.prototype.__proto__);
// modify toString per the ()
/*per.toString = function () {
// return "I am a lovable the Person";
return "the Person [name =" + + this.name ", Age =" + this.age + "]";
}; * /
// modify the Person prototype toString
Person.prototype.toString = function () {
// return "my lovely a Person";
return "Person[name = "+this.name+" ，age = "+this.age+"]";
};
Var = new new Per2 the Person ( "White Skeleton", 16);
the console.log (per);