面向对象基础知识

面向对象:不要被这个名字吓到啊,它不是一门技术,只是一种通用思想而已。


名词解释:

  • 面向对象:使用对象时,只关注对象提供的功能,不用在意其内部细节。它是一种通用思想一种思路,并非只在编程中使用,任何事情都可以采用。举个例子:我们在使用收音机的时候,只需知道那个钮可以操作什么功能就好,不关心它的工作原理。
  • oop:Object Oriented Programming 面向对象的程序设计。
  • this:指的是当前的方法属于谁。

面向对象的思维导图:


js中的面向对象:

面相对象(oop)特点:

1 抽象:抓住核心问题,从整体抽出来一个用来构造对象。例如我们在填写用户信息的时候,会写到姓名,性别以及年龄等等,这都是可以用来收集用户信息的。
2.封装:不考虑内部实现,只考虑功能上的使用。
3.继承性:从已有的对象中,继承出新的对象。

对象的组成:
  1. 方法即函数
  2. 属性即变量

js中的普通对象与函数对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
var o3 = new f1();
var o1 = {};
var o2 =new Object();
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function
  • 总结:在上面的例子中 o1 o2 o3 为普通对象,f1 f2 f3 为函数对象。怎么区分,其实很简单, 凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。 f1,f2,归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function()创建的。

原型对象:

  • 在JavaScript 中,每当定义一个对象(函数)时候,对象中都会包含一些预定义的属性。其中函数对象的一个属性就是原型对象 prototype。注:普通对象没有prototype,但有proto属性。

  • 原型对象其实就是普通对象(Function.prototype除外,它是函数对象,但它很特殊,他没有prototype属性(前面说道函数对象都有prototype属性))。看下面的例子:

1
2
3
4
5
6
function f1(){};
console.log(f1.prototype) //f1{}
console.log(typeof f1. prototype) //Object
console.log(typeof Function.prototype) // Function,这个特殊
console.log(typeof Object.prototype) // Object
console.log(typeof Function.prototype.prototype) //undefined

原型prototype:

  • 原型的应用:可以扩展系统对象,添加一些本部支持的方法和属性。
  • 原型的原理:与css中的.class类一样,给一类的元素添加方法和属性。

原型prototype应用:

1
2
3
4
5
6
7
8
9
10
11
12
var arr1=[1,2,3];
var arr2=[2,3,4];
Array.prototype.sum=function(){
var result=0;
var i=0;
for (var i = 0; i < this.length; i++) {
result+=this[i];
};
return result;
}
alert(arr1.sum());
alert(arr2.sum());
(分析):
  1. 这是分别求两个数组相加的和.
  2. 对于arr1和arr2重复使用的代码,给他们创建了一个函数,并且把他们包起来,哪里需要,哪里就调用。
  3. 最后如果不使用return,则外面用不到这个对象,即return是返回函数控制结果。
  4. prototype是给两个相同的数组添加一个方法。

(小结):
  • 构造函数时候,首字母要大写;
  • 构造函数里:属性(每个对象各不相同),不同的东西就加在这里。
  • 原型prototype:方法(所有对象都一样),相同的东西加在这里。

js中的this机制:

  • 默认绑定全局变量:
1
2
3
4
5
function fn() {
console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn单独调用,this引用window
  • 隐式绑定(隐式调用的意思是,函数调用时拥有一个上下文对象,就好像这个函数是属于该对象的一样):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function fn() {
    console.log( this.a );
    }
    var obj2 = {
    a: 42,
    fn: fn
    };
    var obj1 = {
    a: 2,
    obj2: obj2
    };
    obj1.obj2.fn(); // 42 -- this引用的是obj2.
失去隐式绑定的情况下:
1
2
3
4
5
6
7
8
9
10
function fn() {
console.log( this.a );
}
var obj = {
a: 2,
fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"
  • 显示绑定:(它接受第一个参数即是上下午问对象,并将其赋给this)
1
2
3
4
5
6
7
function fn() {
console.log( this.a );
}
var obj = {
a: 2
};
fn.call( obj ); // 2
如果传递为null,结果就是绑定默认全局变量。
1
2
3
4
5
6
7
8
function fn() {
console.log( this.a );
}
var obj = {
a: 2
};
var a = 10;
fn.call( null); // 10
  • new新对象绑定(如果是构造函数,用new来调用,绑定的将是新创建的对象)
1
2
3
4
5
function fn(a) {
this.a = a;
}
var bar = new fn( 2 );
console.log( bar.a );// 2

!!!学会面向对象思想还是蛮有意思的,因为用这种思想敲代码,虽然思维比较跳跃,但是易用性较强,代码利于后期更新与维护,很多游戏公司都会使用这种思想去编程游戏。