JavaScript - 理解面向对象编程

一、关键字new

javaScript的函数，
1、直接执行函数，返回的是undefined。
2、使用new，返回的是对象。

如果函数没有返回值时，返回this。

function Person(name){
    this.name=name;
    this.say=function(){
        console.log("hello "+name);
    }
}

测试代码如下：

var jonny = Person("jonny");
console.log(jonny); //输出undefined

var jonny = new Person("jonny");
console.log(jonny); //输出Person {name: "jonny", say: ƒ}

在 new 是内部处理流程如下：

new Person() = {
  var obj = new Object();
  obj.__proto__ = Person.prototype;
  var result = Person.call(obj); //obj就有了Person函数里的属性
  return obj;
}

1. 创建一个空对象 obj。
2. 把空对象的原型链上级设置成Person的原型函数。
3. 更换this调用。
4. 返回obj。

如果有return的话，分两种情况。

1. return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。
   这种情况下，忽视return值，依然返回this对象。

function Person(name){
    this.name=name;
    this.say=function(){
        console.log("hello "+name);
    }
    return 1;
}

var a = new Person("johny");
console.log(a);  //输出Person {name: "johny", say: ƒ}

2. return的是Object。
   这种情况下，不再返回this对象，而是返回return语句的返回值。

function Person(name){
    this.name=name;
    this.say=function(){
        console.log("hello "+name);
    }
    return {hello:this.say};
}

var a = new Person("johny");
console.log(a); //输出{hello: ƒ}

二、原型添加的函数

function Person(name){
    this.name=name;
    this.say=function(){
        console.log("hello "+name);
    }
}
Person.prototype.eat = function() {
	console.log('eat food');
};
var p1 = new Person('p1');
var p2 = new Person('p2');

p1.say === p2.say // false
p1.eat === p2.eat // true

给对象添加的方法，对象的每个实例都有实例各自的方法；
给对象的原型添加方法，对象的每个实例共享同一个方法。节省了内存。

三、内部变量和内部方法

;function Person(name){
	// 内部变量
    var _name=name; 
    // 内部方法
    var _say=function(){
        console.log("hello "+_name);
    }
    return {say: _say}
};

var a = new Person("a");
a.say();

四、静态方法

在函数本身上定义的方法，只能通过函数调用，new出来的对象不能够调用。

function Person(){}
Person.sayHi=function(){
	console.log("Hi!");
};

Person.sayHi();//输出Hi!

五、静态对象

jQuery.Person 是一个静态对象，实际就是直接执行匿名函数创建的一个对象。

;jQuery.Person = (function (){
	// 内部变量
    var _name=''; 
    // 内部方法
    var _say = function(name){
    	name && (_name= name); 
        console.log("hello "+_name);
    }
    return {say: _say }
})();

jQuery.Person.say('mic'); //输出hello mic