web前端开发中关于面向对象（一）

    IT专业人员应该都会涉及到一门语言：C++语言。C++语言中就提到了面向过程和面向对象的思想。面向过程、面向对象的思想不仅仅存在于C++语言中，Java、.NET、web前端开发中也存在。那么，web前端开发中，面向对象又是什么？今天，和大家一起学习web前端中关于面向对象。    一、什么是对象？    对象的某种事物，本质是无序的键值对的集合，可以说，万物皆对象。在语言中，对象=属性+方法（也可以说是行为）。    以一个例子来更好的说明面向对象：

<script>    function Person(name,age){       this.name=name;       this.age=age;       this.eat=function(){           console.log(this.name+"eating");       }    }    var p1=new Person("Sue",20);    console.log(p1);</script>

    以上代码块的解释：    1、function Person(){...}    定义了一个函数，该参数的关于人的信息。函数可传参数，可传参数的个数为两个，第一个为人的姓名，第二个参数为人的年龄，两个参数皆为形参，起到占位符的作用。    2、var p1=new Person(...)    定义了一个自变量p1,通过new来定义便确定了函数Person是一个构造函数，而自变量p1的该构造函数的一个实例，向构造函数Person传了两个参数，该两个参数为实参，即为实际的参数，传递给构造函数后会替代构造函数中的形参。    3、console.log(...)    在控制台打印出实例p1的结果。    4、详细介绍    a、构造函数的作用：实例化，产生一个实例对象。    b、new的功能：       （1）在内存中开辟一块内存空间       （2）该内存空间的地址赋给this       （3）将构造函数中的属性及传递的参数添加到该区域       （4）将this的值返回输出    二、实例对象    1、产生方法    （1）通过构造函数    （2）通过自变量    2、访问方式    （1）实例名.属性名    （2）实例名.方法名()    （3）实例名.["属性名"]    （4）实例名.["方法名"]()    三、构造函数的返回值    1、构造函数显示的返回基本的数据类型，和不返回效果一致，返回原来的this,是具体的实例化对象    例：

<script>    function Person(name,age){       this.name=name;       this.age=age;       this.eat=function(){           console.log(this.name+"eating");           return 1;       }    }    var p1=new Person("Sue",20);    console.log(p1);</script>

    p1的结果为：    "name":Sue    "age":20    2、构造函数显示的返回一个对象，实例化出的实例化对象为显示返回的对象    例：

<script>    function Person(name,age){       this.name=name;       this.age=age;       this.eat=function(){           console.log(this.name+"eating");           return [1,1];       }    }    var p1=new Person("Sue",20);    console.log(p1);</script>

    p1的结果为:[1,1];    面向对象的思想中最为重要的为其中this的含义。    下面详细说明this的含义。this在函数中是最为常见的，但在不同的函数中，this的含义和指向也不相同    1、在事件函数中：this表示为事件源    2、在普通函数中:this表示window    3、在构造函数中:this表示实例化对象    4、在原型中：this表示实例化对象    5、在对象方法中:this表示方法的调用者，对象    在解释this的不同含义中提到了一个陌生的概念——原型。那么，原型又是什么？    四、原型    每个函数都有一个原型属性：prototype,该原型属性也是一个对象，默认是Object的实例({}或是new Object()),默认有两个属性(constructor、__proto__)。原型对象中的成员(属性、方法)被原型所属的构造函数实例化出来的对象所共享。    例：

<script>            function Person(name,age){                this.name = name;                this.age = age;                         }            Person.prototype.showName = function(){                console.log(this.name)            }            Person.prototype.showAge = function(){                console.log(this.age)            }            var p1 = new Person("zhangsan",13);            var p2 = new Person('lisi',23);            console.log(p1.showName());            console.log(p2.showAge());</script>

    五、构造函数、实例对象、原型三者联系    1、构造函数中都有一个原型属性prototype，该属性是引用类型，默认是Object的实例    2、原型对象中有一个属性constructor,该属性指向构造函数    3、实例对象当中都有一耳光属性__proto__，该属性指向其构造函数的原型prototype，该属性不是标准属性，不可用在编程中显示使用，该属性是浏览器自己使用。    例：

<script>    var fn=new Function("...");    console.log(fn.__proto__==Function.prototype);//true    console.log(Function.prototype.__proto__==Object.prototype);//true    function Person(name,age){        this.name=name;        this.age=age;    }    Person.prototype.showName=function(){        console.log(this.name);    }    Person.prototype.showAge=function(){        console.log(this.age);    }    var  p=new Person("Sue",20);   console.log(Person.prototype.constructor==Person);//true    console.log(p1.__proto__==Person.prototype);//true</script>

    六、prototype和__proto__两者区别    1、两者均指向同一个对象    2、prototype站在构造函数的角度而言    3、__proto__站在实例对象的角度而言    七、函数    1、函数的本质：函数也是引用类型，函数名实际为内存地址。引用类型比较的是内存地址    2、函数是对象，对象不一定是函数。    关于面向对象还有许多知识。对于我们而言，面向对象是较为理解的一块知识点，只有不断的其尝试、验证才能够较好的理解面向对象的思想。