1, OOP's basic problems
1.1 What is process-oriented and object-oriented?
Process-oriented: focus on how to solve a problem of process steps. Programming is characterized by the function of the one-step process to achieve each step, there is no concept of classes and objects.
Object-Oriented: focus on the object to which a solution to this problem. Programming is characterized by the emergence of a number of class, to get the object from the class, the object is to solve this specific problem.
For the caller, the caller needs to process-oriented themselves to achieve a variety of functions. The object-oriented, just tell the caller function object specific methods, without the need for the caller to know the implementation details of the method.
Three features of object-oriented 1.2
Inheritance, encapsulation, polymorphism
1.3 Classes and object relations
① classes: a class with the same set of characteristics (attributes) and behavior (methods).
For example: Human -> Properties: height, weight, sex methods: eat, talk, walk
② objects: from the class, the property value is determined to come up with an individual and methods.
For example: Joe Smith -> Properties: height 180, weight 180 method: talk -> I called Zhang Third, height 180
③ object classes and relations
Class is abstract, the object is the specific (class is an abstract object, the object is a concrete class)
explain:
Class is an abstract concept, can only say that classes have properties and methods, but not to assign a specific value of the property. For example, humans have the name, but can not say the name of humanity Jiaosha. . .
Th object is a specific embodiment, the class is the attribute assigned specific individual comes. For example, Joe Smith is a human individual, it can be said Joe Smith's name called Zhang III. Joe Smith is a property of every human was a specific assignment, then Joe Smith is an object produced by humans.
2, JavaScript in the object-oriented
2.1 Creating classes and objects in step
① create a class (constructor): class name must use a large hump law, that the first letter of each word must be capitalized.
|
1
2
3
4
5
6
|
function 类名(属性1){
this.属性1 = 属性1;
this.方法 = function(){
//方法中要调用自身属性，必须要使用this.属性
}
}
|
② By class, instantiating (new) an object.
var obj = new class name (particularly the value of the attribute 1);
obj property; Call Properties
. Obj method (); method calls
③ Notes
>>> by class name, a new new target process, called "class is instantiated"
>>> the this class, will instantiation, the new point to the new object. So, this. Attribute this. Method, in fact, the binding properties and methods in the upcoming new objects out above.
>>> in the class, to call their own property, you must use this. Attribute name, if the direct use of variable names, you can not access the corresponding properties.
>>> class name must use a large hump law, pay attention to the difference between ordinary function.
2.2 Two important attributes constructor and instanceof
①constructor: Returns the current object's constructor
>>>zhangsan.constructor = Person; √
②instanceof: a detection object is not an instance of the class;
>>> lisi instanceof Person √ lisi by Person class of the new
>>> lisi instanceof Object √ all objects are instances of Object
>>> Person instanceof Object √ functions themselves are objects
3, JavaScript point in this issue
In part, we have created a class, and through this new class out of an object. However, there appeared a lot of this. Many students will force the ignorant, this is not "this" mean? Why do I write this in the function inside the definition of property, and finally to the function of a new object? ?
3.1 who end up calling a function, this points to who!
① this point who should not be considered a function in which the statement, but should consider the function where calls! !
② this point, always only be an object, it can not be a function! !
③ this point of the object, called a function of context context, also called the caller of the function.
3.2this point of law (and the closely related function is called!)
① by calling the function name, this always point window ()
|
1
2
|
func(); // this--->window
//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。
|
② through the object method call, this points to the object
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 狭义对象
var obj = {
name:"obj",
func1 :func
};
obj.func1(); // this--->obj
//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。
// 广义对象
document.getElementById("div").onclick = function(){
this.style.backgroundColor = "red";
}; // this--->div
//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个div控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个div对象。
|
③ a function of the element of the array, with the array subscript call, the this point to the array
|
1
2
3
|
var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。
|
④ function as a window callback function using built-in functions, this point window. For example setTimeout, setInterval, etc.
|
1
2
3
|
setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。
|
⑤ function as a constructor, to use the new keyword to call, this points to a new new object
|
1
2
|
var obj = new func(); //this--->new出的新obj
//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。
|
3.3 face questions on this issue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
// 函数的最终调用者 obj.prop
var test = obj.prop.getFullname;
console.log(test());
// 函数的最终调用者 test() this-> window
obj.func = obj.prop.getFullname;
console.log(obj.func());
// 函数最终调用者是obj
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());
// 函数最终调用者数组
|