浅谈js构造函数的方法与原型prototype

转载自品略图书馆  http://www.pinlue.com/article/2019/03/3116/218522323139.html

 

把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况简称为prototype上的方法

<script type="text/javascript">

// 构造函数A

function A(name) {

this.name = name ;

this.sayHello = function() { //构造函数里面包含了一个方法sayHello 即定义在构造函数内部的方法

alert('Hello, my name is: ' + this.name);

}

}

function B(name) {

this.name = name  ;

}

B.prototype.sayHello = function() {  //方法sayHello写在了构造函数B的prototype属性上面 定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法

alert('Hello, my name is: ' + this.name);

};

var a1 = new A('a1');

var a2 = new A('a2');

a1.sayHello();

a2.sayHello();

var b1 = new B('b1');

var b2 = new B('b2');

b1.sayHello();

b2.sayHello();

</script>

首先写了两个构造函数,第一个是A,这个构造函数里面包含了一个方法sayHello;第二个是构造函数B, 我们把那个方法sayHello写在了构造函数B的prototype属性上面.

通过使用构造函数A创建了两个对象,分别是a1,a2;通过构造函数B创建了两个对象b1,b2;我们可以发现b1,b2这两个对象的那个sayHello方法 都是指向了它们的构造函数的prototype属性的sayHello方法.而a1,a2都是在自己内部定义了这个方法. 定义在构造函数内部的方法,会在它的每一个实例上都克隆这个方法;定义在构造函数的prototype属性上的方法会让它的所有示例都共享这个方法,但是不会在每个实例的内部重新定义这个方法. 如果我们的应用需要创建很多新的对象,并且这些对象还有许多的方法,为了节省内存,我们建议把这些方法都定义在构造函数的prototype属性上·

当然,在某些情况下,我们需要将某些方法定义在构造函数中,这种情况一般是因为我们需要访问构造函数内部的私有变量.

函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法.

prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的内存占用就比较小.

//----Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

<script>

function Cat(name, color) {

this.name = name;

this.color = color;

}

// 以下两条是不变的属性和方法

Cat.prototype.type = "猫科动物";

Cat.prototype.eat = function () {   alert("吃老鼠")   ｝；

//生成实例。

var cat1 = new Cat("大毛", "黄色");

var cat2 = new Cat("二毛", "黑色");

lert(cat1.type); // 猫科动物  原型属性

at1.eat();// 吃老鼠   原型方法

alert(cat1.eat == cat2.eat);//trueF

</script>