JavaScript之面向对象浅析1

JavaScript这块面向对象知识是在原生中非常重要的，也是很多公司在面试中经常问到的问题。这里我只是把以前所记得读书笔记转上来，顺便复习下概念。

• 基本概念

  ①什么是对象？ （对象是一个整体在内部有自己的属性和方法，起到对外部提供操作，一切皆对象）

  ②什么是面向对象？ （使用对象时，值关注对象提供的功能，不关注其内部细节如Jquery般）

  ③JS中的面向对象（oop特点）
  <1> 抽象 （抓住事物核心问题）
  <2>封装（不考虑内部怎么实现，只考虑功能使用如Jquery般）
  <3>继承（多重继承||多态）从已有的对象上，继承出新的对象

  ④在对象中，变量被叫作“属性”；函数被叫作“方法”

  ⑤关于this指向问题 ：当前的方法属于谁，this就指向谁 ||　当为全局变量或函数时，this属于window对象的属性或方法

• 创建对象

    ①工厂模式
    function person(name,sex){
        var p = new Object(); // "原料" 空Object对象
        p.name = name;      //   "加工1" 添加属性
        p.sex = sex;       // "加工2"  添加属性
        p.sayName = function(){  // "加工3" 添加方法
            alert("My Name is" + this.name);
        }   
        return p;    // "出厂"  return出对象
    }
    var myPerson = person('ljx','man');

    工厂模式存在的问题: 
    <1> 没有在函数外部实例化对象（也就是在外部没有出现“new Obj()”）
    <2> 创建的每一个对象都有自己的方法，浪费资源

    ②构造函数
    function Person(name,sex){
        this.name = name;
        this.sex = sex;
        this.sayName = function(){
            alert("My Name is " + this.name);
        }
    }
    var myPerson = new Person('ljx','man');

    构造函数与工厂模式的区别：
    <1> 有显式的创建对象（new了个对象）
    <2> 直接将属性和方法赋给了this对象
    <3> 没有return语句且函数名首字母大写

    工厂模式和构造函数共同存在的问题：**某些属性/方法不能共存，每创建一个对象，都会相应的创建属性/方法，这样造成内存的浪费**

    ③原型模式（重点理解原型对象）

    function Person(){
        Person.prototype.name = 'ljx';
        Person.prototype.sex = 'man';
    }
    var myPerson = new Person()

    <1> 只要创建一个函数，就会为函数创建一个**prototype属性**指向该函数的**原型对象**，并且原型对象会有一个**constructor属性**指向包含prototype属性的构造函数的指针
    <2> 原型对象包含可以由特定类型的所有实例共享的属性和方法
    <3> 如图：

    <4> 更简单的原型语法
    Person.prototype = {}; 其中涉及操作符 “instanceof” 表示 “该实例属于哪个对象”
    <5> 注意当用上述语法改写原型对象时，如果在改写前实例化对象，那么之后该实例化的对象不能调动改写后原型对象的属性/方法
    <6> 关于原型模式存在的问题： 如果在原型对象中存在引用类型的属性，则当实例化对象改写属性时，会导致原型对象中的属性也改变。

    ④ 混合模式 （构造函数模式与原型模式的结合）
    <1> 原理：**构造函数模式用于定义实例属性，而原型模式用于定义方法/共享属性**
    function Person(name,sex){
        this.name = name;
        this.sex = sex;
    }
    Person.prototype.sayName = function(){
        alert("My Name is " + this.name);
    }
    var myPerson = new Person('ljx','man');
    myPerson.sayName();