JavaScript 面向对象编程

面向对象编程OOP ，这个概念就不再这里赘述，有兴趣的可以看看Java 相关的知识，Java 对面向对象的支持很到位。万物皆对象。

Js 的设计者在编写整体框架时也引入了面向对象的概念，说实话以我目前掌握的知识面来看，真不咋的，能不能很好地被使用还两说。

具体来说包括两大方面，无多态(以问题的形式剖析）

一、封装

　　1、怎么用？

　　　　1.1 基本用法　　　　

    var person = {
        name: "Nicholas",  
        age: 29,  
        job: "Soft Engineer",  

        getName: function() {
            alert(this.name);    
        }
    };

　　　 1.2 问题：

　　　　1）毫无封装性

function orientObject() {
	var person = {
		name: "Nicholas",  
		age: 29,  
		job: "Soft Engineer",  

		getName: function() {
			alert(this.name);	
		}
	};
	person.name = "peter";
	person.getName(); //peter

 　　　　1.1）引入概念：数据属性

 

    var person = {};
    Object.defineProperty(person,"name",{
        enumerable: true, //true
        configurable: true, //可以删除的
        value: "Nicholas",
        writable: true //false,内容没有修改
    });
    // alert(person.name);
    // person.name = "peter";
    // alert(person.name);
    alert(person.name);
    delete person.name;
    alert(person.name); //undfined

 

　　　1.2） 引入访问器属性：

　　　　　　可以设置get ，set 方法

    /*定义属性方法：
    * 1 defineProperty() -- 一个属性设置
      2 defineProerties() 多个属性设置
    */
    var person = {};
    Object.defineProperties(person,{
        _name: {        //_表示私有属性
            writable: true,
            value: "Nicholas"
            
        },

        _age: {
            writable: false,
            value: 21
        },

        name: {
            get: function() {
                return this._name;
            },

            set: function(newName) {
                this._name = newName;
            }
        },

        age: {
                get: function() {
                    return this._age;
                }
        }
    });
    console.log(person.name + " " + person.age);
    person.name = "peter";
    console.log(person.name + " " + person.age);

 

　　　　2）如何定义一个类？　　　

//HybridPatternExample01     
   function Person(name, age, job){  //构造函数
            this.name = name;
            this.age = age;
            this.job = job;
            this.friends = ["Shelby", "Court"];
        }
        
        Person.prototype = {  //原型：所有实例共享的东西
            constructor: Person,
            sayName : function () {
                alert(this.name);
            }
        };
        
        var person1 = new Person("Nicholas", 29, "Software Engineer");
        var person2 = new Person("Greg", 27, "Doctor");
        
        person1.friends.push("Van");
        
        alert(person1.friends);    //"Shelby,Court,Van"
        alert(person2.friends);    //"Shelby,Court"
        alert(person1.friends === person2.friends);  //false
        alert(person1.sayName === person2.sayName);  //true

 

二、继承

                    
        function SuperType(name){
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }
        
        SuperType.prototype.sayName = function(){
            alert(this.name);
        };

        function SubType(name, age){  
            //继承
            SuperType.call(this, name);
            
            this.age = age;
        }

        SubType.prototype = new SuperType();
        
        SubType.prototype.sayAge = function(){
            alert(this.age);
        };
        
        var instance1 = new SubType("Nicholas", 29);
        instance1.colors.push("black");
        alert(instance1.colors);  //"red,blue,green,black"
        instance1.sayName();      //"Nicholas";
        instance1.sayAge();       //29
        
       
        var instance2 = new SubType("Greg", 27);
        alert(instance2.colors);  //"red,blue,green"
        instance2.sayName();      //"Greg";
        instance2.sayAge();       //27
       

 三、JavaScript 中的继承的玩法

引入了两个东西： prototype ,__proto__。区别与联系 描述如下：

1. 图解

 

2. 文字+code 解析：

        /*
        首先，要明确几个点：
            1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。
            1.1问题；
            null undefined string number boolean  基本数据类不是对象。类似Java，基本数据类型已经和引用数据类型做了"装箱，解箱"处理,例如： string：String。 null,undefined 这个暂时没有做。
            2.方法(Function)方法这个特殊的对象，除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个子属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

        */
        function Foo() {
            var attr1 = "H";

        }
        var f1 = new Foo();
        var f2 = new Foo();
        //undefined.对象是没有prototype属性
        console.log(f1.prototype); 
        /* 函数有prototype,so:返回一个原型对象，包含所有(f1,f2共享数据+方法)：
        *    1、constructor：Foo()，做到对象和构造函数之间绑定 
        *    2、__proto__ :由于对象都有这个属性，指向该对象的构造函数的原型对象(
        *    这里是Object.prototype).注意：Object 在浏览器中默认是function，typeof
        *   Object 得出。分析：其实Object 既是对象也是函数，那么就按照最准确的定义走(
        *    类似：小明是一个小学生，同时也是人)。
        */
        console.log(f1.__proto__);
        /* 1、f1.__proto__.__proto__ === Object.prototype
           2、Foo:是函数也是对象，所以也具有__proto__属性，它的构造函数是Function,
           所以包含了consturctor :Function(),所有函数类公用方法和属性(__proto__)。 所有的函数都是如此(包括：Function,Object ) 的__proto__都应该相同　xxx.__proto__。这里也间接说明了，没有特殊函数之说.
           3、所有对象(Object.prototype 本身除外).__proto__.__proto__ === Object.prototype.
           4、一旦使用了__proto__ | prototype 就只能后边加.__proto__，因为已经是对象了
        */
        console.log(f1.__proto__.__proto__);
        if(f1.__proto__.__proto__ === Object.prototype) console.log(true);
        if(Foo.prototype.constructor == Foo); console.log(true);
        console.log(Foo.__proto__);// Function.prototype
        console.log(Foo.__proto__ == Function.__proto__ && Function.__proto__ == Object.__proto__) ;
        console.log(Function.__proto__);
        console.log(Object.prototype.__proto__);//null
        console.log(Object.prototype);//返回一个对象
        console.log(Object.__proto__.__proto__); //返回一个"函数对象"
        console.log(Object.__proto__.prototype); //undefined


        console.log(Object.__proto__.__proto__ === Object.prototype );