js 中的面向对象

一 .面向对象

创建对象的几种方法

1. 使用Object或是对象字面量创建对象
2. 工厂模式创建对象
3. 构造函数创建对象
4. 原型模式创建对象

1  . 使用Object 或是对象字面量方式创建

JS中最基本的创建对象的方式

使用Object
var student = new Object();
student.name = "xiaojua";
student.gender = "female";
//这样一个student对象就创建完毕.

使用对象的字面量方式创建      弊端是,当创建多个同类的对象时,比较麻烦
var student = {
name:"easy";
age = "20"
}

2 . 工厂模式创建对象

js中没有类概念,那我们就用一种函数将以上函数创建对象过程封装起来,重复调用,同时可以给出特定接口来初始化对象

function createStudent(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}

var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

接着问题来了,加入在创建一个水果类

function createFruit(name, color) {
  var obj = new Object();
  obj.name = name;
  obj.color = color;
  return obj;
}

var v1 = createStudent("easy1", 20);
var v2 = createFruit("apple", "green");

//对于上面代码创建的 v1 v2 ,外媒无奈用instanceof操作符检测时,都是Object类型,但是我们v1 是student类型
v2是fruit类型,为了实现这个,有了构造函数方法创建对象

3 . 构造函数模式创建对象

在上面创建Object这样的原生对象时候,就用过了这个构造函数:

var obj = new Object();

在创建原生数组Array类型对象时,也是用过此构造函数

var arr = new Array(10);  //构造一个初始长度为10的数组对象

先了解构造函数的和普通函数的区别:

1  . 实际上并不存在创建构造函数的特殊语法,其与普通函数的唯一区别在于调用方法 . 对于任意函数,适应new操作符调用,那么他就是构造函数;不使用new操作符调用,就是普通函数.

2  . 按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,有利于现行区分二者.

3  . 使用new操作符时嗲用构造函数时,会经历(1) 创建一个新的对象;(2)将构造函数的作用域赋给新的对象(使this指向该对象);(3)执行构造函数代码;(4)返回新的对象

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = function(){
    alert(this.name) //添加一个方法属性
  };
}

function Fruit(name, color) {
  this.name = name;
  this.color = color;
  this.alertName = function(){
    alert(this.name)
  };
}


//下面分裂创建对象
var v1 = new Student("easy",20)
var v2 = new  Fruit ("apple" ,"red")

再次用
alert(v1 instanceof Student);  //true
alert(v2 instanceof Student);  //false
alert(v1 instanceof Fruit);  //false
alert(v2 instanceof Fruit);  //true

alert(v1 instanceof Object);  //true 任何对象均继承自Object
alert(v2 instanceof Object);  //true 任何对象均继承自Object

我们会发现Student对象中共有同样的方法，当我们进行调用的时候这无疑是内存的消耗。

我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：

　

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = alertName;
}

function alertName() {
  alert(this.name);
}

var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);

在调用stu1.alertName()时，this对象才被绑定到stu1上。

我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题

但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

 4 原型模式创建对象

原型链甚至是原型继承.是整个JS中最难理解的一部分,有时间阔以查阅 JS原型

function Student() {
    this.name = 'easy';
    this.age = 20;
}


Student.prototype.alertName = function(){
    alert(this.name);
};

var stu1 = new Student();
var stu2 = new Student();

stu1.alertName();  //easy
stu2.alertName();  //easy

alert(stu1.alertName == stu2.alertName);  //true 二者共享同一函数