javascript原型深入解析1-prototype 和原型链、js面向对象

1.用prototype 封装类

创建的每个函数都有一个prototype(原型属性),他是个指针,指向的对象,这个对象的用途就是包含了这个类型所有实例共享的属性和方法。

回味这句,想想java或者C++吧,如果func是class 类,类的类属性和类方法都放在了prototype中了

var func = function (argument) {
  // body...
};

 

Ok,现在就用c++面向对象的思想建立个Person类,里面有一些类成员

function Person(){

 }

 Person.prototype.say = function(first_argument) {
   // body...
   console.info('i say...')

 };

 Person.prototype.age = 10;
 var sy = new Person(); // new 会创建个对象,不加new 就是执行这个函数


 console.info(sy.age)
 sy.say()

成功实现了面向对象,sy 可以say,还有了age,当然age不应该是类属性,

Say和age 是所有 Person 所有实例共享的,假如age是数组,sy.age[1] = 10 会导致所有实例的age都变化

2.原理:定义Person function,实例化一个Person,中间有啥奥秘

定义:

function Person(){

}
  1. 只要创建个新函数,js引擎会根据一组特定的规则为该函数创建一个原型对象, prototype属性指向这个原型对象;
  2. 默认情况下,所有原型对象都会自动获取一个constructor(构造函数)属性,这个constructor指向了prototype属性所在的函数;

实例化:

new的过程拆分成以下三步:

  1. var p={}; 也就是说,初始化一个对象p
  2. p.__proto__ = Person.prototype;
  3. Person.call(p); 也就是说构造p,也可以称之为初始化p,过程中关键字 this 被设定为该实例。
  4. 返回实例
function New (f) {

    var n = { '__proto__': f.prototype }; /*第1,2步*/

    return function () {

        f.apply(n, arguments);            /*第3步*/

        return n;                         /*第4步*/

    };

}

var p2 = New (Point)(10, 20);

p2.print(); // 10 20

console.log(p2 instanceof Point); // true

sy = new Person(),创建一个新对象sy,sy实例的内部将包含一个Prototype类型的指针__proto__,指向Person函数的原型对象,实例sy和Person没直接关系,和Person.prototype才有直接关系

这里我们可以发现,prototype太重要了

       

sy.say() 看来是通过查询__proto__指向的原型来调用方法的;访问对象属性时,js会搜索改该属性,从实例sy开始,沿着原型搜索;

需要注意的是sy.age = 100, 不会修改原型的值,而是给sy添加了个属性age,以后就屏蔽了原型的age,这点和python类似。当然你可以 delete sy.age,就可以重新访问到原型属性了。当然原型的属性age不属于实例,实例也delete不掉。

有的浏览器无法访问__proto__,可以通过Person.prototype.isPrototypeOf(sy)  等于true,或者Object.getPrototypeOf(sy) == Person.prototype 判断原型和实例之间的关系s

3. 类:现在我们来实现面向对象的封装功能

function Person(name, age){
  this.name = name; // 调用new的时候,创建个新的this指向当前正在构造的新实例,其他时候的this都是指向调用者s
  this.age = age;
}



Person.prototype.say = function(first_argument) {
  console.info(this.name + ' say...')
};

var sy = new Person('suyuan', 26);
sy.say()

var zl = new Person('zhuli', 27)
zl.say()

一句话,方法用原型链,类属性(数据)用构造函数

4.既然面向对象编程了,那么继承呢?

Js中的函数没有声明,只有定义,所有不支持接口继承,那我们就用原型链来实现定义(实现)继承

function Person(){
  this.live = true;
}

Person.prototype.say = function(first_argument) {// (4) Person的原型添加函数say
  console.info('i am ' + this.live)

};



function Man(){
  this.manLive = true;
}

var tmp_person = new Person();//(3) 实例tmp_person 的__proto__ 指向Person原型
Man.prototype = tmp_person //(2) temp_person 这个对象有say方法,Man的原型(也就是temp_person)有say方法,Man实例化出来的对象sy当然有say

var sy = new Man();//(1)
sy.say()//(5)

sy是Man实例,

(1)sy的__proto__指向Man的原型,

(2)Man原型指向Person的实例tmp_person,

(3) tmp_person的__proto__指向Person原型,

(4)Person原型有函数say

(5)然后sy 就有了say方法。

在此继承就实现了。

更深入的了解,请看下一篇

 http://www.cnblogs.com/suyuan1573/p/proto.html

原文地址:https://www.cnblogs.com/suyuan1573/p/prototype.html