JavaScript——构造函数背后的故事

前言:

我的博客里JavaScript(其他语言也一样)中涉及基于面向对象的部分前后是有一些关联的,涉及到前面的博客,我会标注出来,希望能帮助大家,顺便也帮助自己回顾。好了,现在开始正题。

主题:

构造函数的前身是工厂方法(设计模式)的前身,这个是今天的论证主题。

论证过程:

1.使用字面量创建一个对象

var obj={
	name:"孙悟空",//属性
	sayName:function(){//方法
		alert(this.name);
	}
};

如果咱们再创建一个对象就需要再写一遍上述代码,创建多少个对象,就要写多少次,然而猿们是相当聪明的,重复的事儿他才不干呢。那么怎么减少重复的代码,于是就有了下面

2.工厂方法创建大量对象

function createPerson(name){
	//创建一个对象
	var obj = new Object();
	obj.name=name;
	obj.sayName=function(){
		alert(this.name);
	}
	//将新的对象返回
	return obj;
}

外部调用此方法

var obj1=createPerson("孙悟空");//创建一个对象
var obj2=createPerson("猪八戒");//再创建一个对象
var obj3=createPerson("沙和尚")//再而三的创建一个对象

这样写是不是感觉很爽,当然上边是创建一类人的对象的,创建一系列狗类对象也是一样,将createPerson变为createDog就可以了。

那么,为了创造对象的函数与普通函数区分开,给它取了个别样的名字——构造函数

3.构造函数

将上边createPerson方法名变为Person

function Person(name){
	this.name=name;
	this.sayName=function(){
		alert(this.name);		
	}
}

再次修改
现在我们创建一个对象都会有一个sayName方法根据之前的博客介绍可以把函数单独拎出来,最终的样子

function Person(name){
	this.name=name;
	this.sayName=fun	
	}
}
function fun(){
	alert(this.name);	
}

外部调用构造函数使用new

var obj1=new Person("孙悟空");//创建一个对象
var obj2=new Person("猪八戒");//再创建一个对象
var obj3=new Person("沙和尚")//再而三的创建一个对象

构造函数与普通函数区别

  • 1.构造函数习惯上首字母大写
  • 2.构造函数使用new调用,普通函数直接调(面向对象中成员函数对象.调)

new关键字进行的操作:

推荐一位博主,以下借鉴于他

  • 1.创建一个空的JavaScript对象(上边字面量创建对象方式 即{});
  • 2.将函数的prototype赋值给对象_proto_属性;
  • 3.调用构造函数,并将新创建的对象作为函数this上下文(不太懂,看这里)
  • 4.返回该对象,返回值不是对象,则创建

对于第2条提到的prototype会在下一篇博客说

感谢您的阅读,如有错误,欢迎大佬交流

发布了160 篇原创文章 · 获赞 75 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览