js构造函数

2022-10-24 12:50:25

使用函数做自动化

function createObj(nick, age){

  var obj = {

  	nick: nick,

  	age: age,

  	printName: function(){

			console.log(this.nick);

		}

  };

  return obj;

}

var obj3 = createObj('Byron', 30);

obj3.printName();

我们通过创建一个函数来实现自动创建对象的过程

有型一些

要想让我们构造出的函数有型一些，我们需要了解一些额外知识

function作为构造函数（通过new操作符调用）的时候会返回一个类型为function的name的对象
function可以接受参数，可以根据参数来创建相同类型不同值的对象
function实例作用域内有一个constructor属性，这个属性就可以指示其构造器

new

new 运算符接受一个函数 F 及其参数：new F(arguments...)。这一过程分为三步：

创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。
返回实例。

根据这几个特性，我们可以改造一下创建对象的方式

function Person(nick, age){

	this.nick = nick;

	this.age = age;

	this.sayName = function(){

			console.log(this.nick);

	}

}

var p1 = new Person();

instanceof

instanceof是一个操作符，可以判断对象是否为某个类型的实例

p1 instanceof Person; // true

p1 instanceof Object;// true

instanceof判断的是对象

1 instanceof Number; // false

问题

构造函数在解决了上面所有问题，同时为实例带来了类型，但可以注意到每个实例printName方法实际上作用一样，但是每个实例要重复一遍，大量对象存在的时候是浪费内存

构造函数

任何函数使用new表达式就是构造函数
每个函数都自动添加一个名称为prototype属性，这是一个对象
每个对象都有一个内部属性 __proto__(规范中没有指定这个名称，但是浏览器都这么实现的)
指向其类型的prototype属性，类的实例也是对象，其proto属性指向“类”的prototype

prototype

通过图示我们可以看出一些端倪，实例可以通过__prop__访问到其类型的prototype属性，这就意味着类的prototype对象可以作为一个公共容器，供所有实例访问。

抽象重复

我们刚才的问题可以通过这个手段解决

所有实例都会通过原型链引用到类型的prototype
prototype相当于特定类型所有实例都可以访问到的一个公共容器
重复的东西移动到公共容器里放一份就可以了

看下代码

function Person(nick, age){

	this.nick = nick;

	this.age = age;

}

Person.prototype.sayName = function(){

	console.log(this.nick);

}

var p1 = new Person();

p1.sayName();

这时候我们对应的关系是这样的

终于有个靠谱的构建对象的方式了

码农公寓