js面向对象之封装（构造函数）

什么是“构造函数”？

构造函数其实就是一个普通的函数，但是在这个函数体中使用了 "this" 这个变量。我们向构造函数使用 new 运算符，就能生成实例化对象，并且这个 this 变量会绑定在这个new出来的实例化对象上。

关键：

1、函数中的 "this" 指向的是实力化的对象。

2、实例化的对象是我们在构造函数的基础上使用 new 运算符生成的。

例如：

//定义一个构造函数

function myfile(name,work){

this.name = name;

this.work = work;

this.type = "person";

this.sex = function(){alert("nan")};

}

var myfile1 = new myfile("zhang","IT"); //new 一个实例化对像。

alert(myfile1.name); //zhang

alert(myfile1.type); //person

myfile1.sex(); //nan

总结：this指向的new出来的实例化对象。

上面的实例中有一个问题，就是 this.type = "person" this.sex = function(){alert("nan")};这两个的值是写死在构造函数中的，不够灵活，如果我们想要重复调用，这时this.type与this.sex的局限性就会很大。

解决方法：

我们可以使用：prototype 原型模式

Prototype 模式

在javascript中，每一个构造函数都有一个 prototype属性，指向另一个对象。被指向的这个对象的所有属性和方法，都会被构造函数的实例化对象所继承。

所以我们可以用 Prototype 模式来解决上面的不灵活问题，即部分不变的属性和方法我们可以定义在prototype对象上。

例如：

//创建构造函数

function myfile(name,work){

this.name = name;

this.work = work;

}

myfile.prototype.type = "person"; //在prototype对象上来定义不变属性 type

myfile.prototype.sex = function(){alert("nan")}; //在prototype对象上来定义不变属性 sex

var myfile1 = new myfile("zhang","IT"); //new 一个实例化的对象

alert(myfile1.type); //person

myfile1.sex(); //nan

<!--简单的封装实例-->

<button class= "btn" > 按钮1 </button>

<button class= "btn" > 按钮2 </button>

<button class= "btn" > 按钮3 </button>

<button class= "btn" > 按钮4 </button>

<button class= "btn" > 按钮5 </button>

<script>

var aBtn = document . getElementsByTagName ( "button" ) ;

function myBtn (type){

this . type = function (){

for ( var i= 0 ; i<type . length ; i++){

type[i] . onclick = function (){

alert ( this . innerHTML ) ;

}

}

} ;

}

var myfile1 = new myBtn ( aBtn ) ;

myfile1 . type () ;

</script>

Prototype模式的验证方法

1、isPrototypeOf()用于判断某个原型对象 即 proptotype 对象和某个实例之间的关系。

例如：

function myfile(name,work){

this.name = name;

this.work = work;

}

myfile.prototype.type = "person";

myfile.prototype.work = function(){alert("IT");}

var myfile1 = new myfile("zhang","IT");

alert(myfile.prototype.isPrototypeOf(myfile1)); //true

2、每一个实例化对象都有一个 hasOwnProperty() 方法。

返回一个布尔值，指出一个对象是否具有指定名称的属性。

object.hasOwnProperty( proName)

参数

object

必选项。一个对象的实例。

proName

必选项。一个属性名称的字符串值。

说明

如果 object 具有指定名称的属性，那么 hasOwnProperty 方法返回 true；反之则返回 false。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

例如：

function myfile(name,work){

this.name = name;

this.work = work;

}

myfile.prototype.type = "person";

myfile.prototype.work = function(){alert("IT");}

var myfile1 = new myfile("zhang","IT");

alert(myfile1.hasOwnProperty("type")); //false

alert(myfile1.hasOwnProperty("name")); //true

注意：hasOwnProperty()方法必须是对象本身的一个成员，无法检查出该对象原型链中的属性，如上例所示， alert(myfile1.hasOwnProperty("type")); 返回的是false因为type是使用原型链prototype添加的属性,而 alert(myfile1.hasOwnProperty("name"));返回的是true,因为name是对象本身的属性。

3、in运算符

1、可以用来判断一个实例化对象中是否含有某个属性，无论是不是本地的。

2、用for.....in来遍历某个实例化对象的所有属性。

function myfile(name,work){

this.name = name;

this.work = work;

}

myfile.prototype.type = function(){alert("person");}

var myfile1 = new myfile("zhang","IT");

alert("work" in myfile1); //使用in来判断work里是不是有name这个属性：

for (var a in myfile1){ //使用in来循环myfile1里的所有属性：

alert(a);

alert("myfile1["+a+"]="+myfile1[a]);

}