rwson

rwson

一个前端开发

javascript原型

javaScript原型:

定义:每一个方法被创建时都有一个prototype属性,改属性是一个指针,总是指向一个对象。该对象可以将特定的属性和方法包含在内,起到一个被所有实例所共享的作用。

    function Person(){

    }

    var obj  = Person.prototype;
	    obj.name = "小宋";
	    obj.age = 20;
	    obj.sayName = function(){
	        console.log(this.name);
	    };
    //	定义一个变量来引用原型,修改这个变量的属性达到修改原型的目的

原型对象、构造方法、实例对象三者的关系

1、构造方法.prototype = 原型对象

2、原型对象的constructor = 构造方法

3、实例对象.prototype = 原型对象

原型中的常用方法

1、isPrototypeOf (判断一个对象是不是另一个对象的原型) 示例:

function Person(){}
var obj  = Person.prototype;
    obj.name = "小宋";
    obj.age = 20;
    obj.sayName = function(){
        console.log(this.name);
    };
var p = new Person();
console.log(obj.isPrototypeOf(p1));		//	true

2、Object.getPrototypeOf (根据实例对象获取原型对象) 示例:

function Person(){}
Person.prototype.name = "张三";
Person.prototype.age = 20;
Person.prototype.sayName = function(){
    console.log("原型方法!");
};
var p1 = new Person();
console.log(Object.getPrototypeOf(p1));	//	Person的原型对象

3、hasOwnProperty (判断一个对象的属性是属于原型属性或者实例属性) 示例:

function Person(){}
    Person.prototype.name = "张三";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log("原型方法!");
    };
var p1 = new Person();
p1.name = "小宋";
console.log(p1.hasOwnProperty("name"));	//	true

4、in操作符 (判断属性是否存在实例对象或原型对象中,类似于hasOwnProperty) 示例:

function Person(){}
    Person.prototype.name = "张三";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log("原型方法!");
    };
var p1 = new Person();
p1.name = "小宋";
console.log("name" in p1);	//	true

5、Object.keys() (取得当前对象下中所有键值,返回一个数组) 示例:

function Person(){}
    Person.prototype.name = "张三";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log("原型方法!");
    };
var p7 = new Person();
console.log(Object.keys(p7));	//	[]
p7.name = "z3";
p7.age = 20;
console.log(Object.keys(p7));	//	["name", "age"]
console.log(Object.keys(Person.prototype));	//	["name", "age", "sayName"]

6、Object.getOwnPropertyNames() (枚举出该对象下所有属性,不管该属性是否可以被枚举,返回数组) 在ECMAScript中,对象原型下的constructor属性是不能被枚举的(for in),但是用Object.getOwnPropertyNames()方法可以把对象原型下所有属性都枚举出来,以数组的形式返回 示例:

function Person(){}
    Person.prototype.name = "张三";
    Person.prototype.age = 20;
    Person.prototype.sayName = function(){
        console.log("原型方法!");
    };
console.log(Object.getOwnPropertyNames(Person.prototype)); 	//	["constructor", "name", "age", "sayName"]

在平常的javaScript面向对象中,如果我们类的原型中没指定构造器,那么该构造器会默认为Object; 在ECMAScript5中,提供了给原型对象重新设置构造器的方法:Object.defineProperty(); ECMAScript5兼容性: IE8+,FireFox4+ 下面我们就一起来看怎么调用该方法:

function Person(){}
Person.prototype = {
    "name":"小宋",
    "age":20,
    "job":"程序员",
    "say":function(){
        console.log("我是原型的函数");
    }
};
Object.defineProperty(Person.prototype,"constructor",{
    "enumerable":false,
   //	关闭枚举访问,默认为关闭状态(for in的时候不能读到该属性)
    "value":Person
  //	指定原型构造器
});

var p1 = new Person();

var str = "";
    for(var attr in p1){
        str += attr + "->" + p1[attr] + "\n";
    }
console.log(str);
/**
  *    name->小宋
  *    age->20
  *    job->程序员
  *    say->function (){
  *                console.log("我是原型的函数");
  *    }
**/

或者我们可以直接通过设置类原型属性的方法来指定构造器

function Person(){}
Person.prototype = {
    "constructor":Person,
    //  指定原型构造器,这边指定的是可以被枚举的
    "name":"小宋",
    "age":20,
    "job":"程序员",
    "say":function(){
        console.log("我是原型的函数");
    }
};

var p1 = new Person();

var str = "";
for(var attr in p1){
    str += attr + "->" + p1[attr] + "\n";
}
console.log(str);
/**
  *    constructor->function Person(){
  *
  *    }
  *    name->小宋
  *    age->20
  *    job->程序员
  *    say->function (){
  *                console.log("我是原型的函数");
  *    }
**/