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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

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

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

•在实际的应用中，这两种方法往往是结合使用的；所以我们要首先了解我们需要的是什么，然后再去选择如何使用

// 构造函数A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}
// 构造函数B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('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();

写了两个构造函数,第一个是A,这个构造函数里面包含了一个方法sayHello;第二个是构造函数B, 我们把那个方法sayHello写在了构造函数B的prototype属性上面.把方法写在构造函数的内部,增加了通过构造函数初始化一个对象的成本,把方法写在prototype属性上就有效的减少了这种成本. 你也许会觉得,调用对象上的方法要比调用它的原型链上的方法快得多,其实并不是这样的,如果你的那个对象上面不是有很多的原型的话,它们的速度其实是差不多的

另外，需要注意的一些地方：

•首先如果是在函数的prototype属性上定义方法的话,要牢记一点,如果你改变某个方法,那么由这个构造函数产生的所有对象的那个方法都会被改变.

•还有一点就是变量提升的问题,我们可以稍微的看一下下面的代码:

func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function
var func1 = function() {
  console.log('func1');
};
func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
  console.log('func2');
}

•关于对象序列化的问题.定义在函数的prototype上的属性不会被序列化,可以看下面的代码：

function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';
var a = new A('dreamapple');
console.log(JSON.stringify(a));

我们可以看到输出结果是{"name":"dreamapple"}

以上这篇浅谈js构造函数的方法与原型prototype就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

以上是 浅谈js构造函数的方法与原型prototype 的全部内容， 来源链接： utcz.com/z/340336.html

回到顶部