63 工厂方法创建对象&构造函数创建对象

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量155 收藏 1
点赞数
分类专栏： JavaScript教程视频 140集实战教学 文章标签： javascript node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57709891/article/details/120735352
版权

1 工厂方法创建对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = {
					name:"孙悟空",
					age:18,
					gender:"男",
					sayName:function(){
						alert(this.name);
					}
			};

			/*
			 * 使用工厂方法创建对象
			 * 	通过该方法可以大批量的创建对象
			 */
			function createPerson(name , age ,gender){
				//创建一个新的对象 
				var obj = new Object();
				//向对象中添加属性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				};
				//将新的对象返回
				return obj;
			}
			
			/*
			 * 用来创建狗的对象
			 */
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					alert("汪汪~~");
				};
				
				return obj;
			}
			
			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("白骨精",16,"女");
			var obj4 = createPerson("蜘蛛精",18,"女");
			/*
			 * 使用工厂方法创建的对象，使用的构造函数都是Object
			 * 	所以创建的对象都是Object这个类型，
			 * 	就导致我们无法区分出多种不同类型的对象
			 */
			//创建一个狗的对象
			var dog = createDog("旺财",3);
			
			console.log(dog);
			console.log(obj4);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2 构造函数创建对象

2.1 创建对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 创建一个构造函数，专门用来创建Person对象的
			 * 	构造函数就是一个普通的函数，创建方式和普通函数没有区别,
			 * 	不同的是构造函数习惯上首字母大写
			 * 
			 * 构造函数和普通函数的区别就是调用方式的不同
			 * 	普通函数是直接调用，而构造函数需要使用new关键字来调用
			 * 
			 * 构造函数的执行流程：
			 * 	1.立刻创建一个新的对象
			 * 	2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
			 * 	3.逐行执行函数中的代码
			 * 	4.将新建的对象作为返回值返回
			 * 
			 * 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
			 * 	我们将通过一个构造函数创建的对象，称为是该类的实例
			 * 
			 * this的情况：
			 * 	1.当以函数的形式调用时，this是window
			 * 	2.当以方法的形式调用时，谁调用方法this就是谁
			 * 	3.当以构造函数的形式调用时，this就是新创建的那个对象
			 * 
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};
			}
			
			function Dog(){
				
			}
			
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("玉兔精",16,"女");
			var per3 = new Person("奔波霸",38,"男");
			
			var dog = new Dog();
			
			/*console.log(per);
			console.log(dog);*/
			
			/*
			 * 使用instanceof可以检查一个对象是否是一个类的实例
			 * 	语法：
			 * 		对象 instanceof 构造函数
			 * 如果是，则返回true，否则返回false
			 */
			//console.log(per instanceof Person);
			//console.log(dog instanceof Person);
			
			/*
			 * 所有的对象都是Object的后代，
			 * 	所以任何对象和Object左instanceof检查时都会返回true
			 */
			//console.log(dog instanceof Object);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.2 构造函数修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 创建一个Person构造函数
			 * 	- 在Person构造函数中，为每一个对象都添加了一个sayName方法，
			 * 		目前我们的方法是在构造函数内部创建的，
			 * 			也就是构造函数每执行一次就会创建一个新的sayName方法
			 * 		也是所有实例的sayName都是唯一的。
			 * 		这样就导致了构造函数执行一次就会创建一个新的方法，
			 * 			执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
			 * 			这是完全没有必要，完全可以使所有的对象共享同一个方法
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				//向对象中添加一个方法
				//this.sayName = fun;
			}
			
			//将sayName方法在全局作用域中定义
			/*
			 * 将函数定义在全局作用域，污染了全局作用域的命名空间
			 * 	而且定义在全局作用域中也很不安全
			 */
			/*function fun(){
				alert("Hello大家好，我是:"+this.name);
			};*/
			//向原型中添加sayName方法
			Person.prototype.sayName = function(){
				alert("Hello大家好，我是:"+this.name);
			};
			
			//创建一个Person的实例
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("猪八戒",28,"男");
			per.sayName();
			per2.sayName();
			
			//console.log(per.sayName == per2.sayName);
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.3 原型对象1

/*
 * 原型 prototype
 * 
 * 	我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
 * 		这个属性对应着一个对象，这个对象就是我们所谓的原型对象
 * 	如果函数作为普通函数调用prototype没有任何作用
 * 	当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
 * 		指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
 * 
 * 	原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
 * 		我们可以将对象中共有的内容，统一设置到原型对象中。
 * 
 * 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
 * 	如果没有则会去原型对象中寻找，如果找到则直接使用
 * 
 * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
 * 	这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
 */

function MyClass() {

}

//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;

//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function () {
    alert("hello");
};

var mc = new MyClass();

var mc2 = new MyClass();

//console.log(MyClass.prototype);
//console.log(mc2.__proto__ == MyClass.prototype);

//向mc中添加a属性
mc.a = "我是mc中的a";

//console.log(mc2.a);

mc.sayHello();

2.4 原型对象2

/*
			 * 创建一个构造函数
			 */
function MyClass(){
				
}

//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";

var mc = new MyClass();
mc.age = 18;

//console.log(mc.name);

//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
//console.log("name" in mc);

//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有当对象自身中含有属性时，才会返回true
//console.log(mc.hasOwnProperty("age"));

//console.log(mc.hasOwnProperty("hasOwnProperty"));

/*
 * 原型对象也是对象，所以它也有原型，
 * 	当我们使用一个对象的属性或方法时，会现在自身中寻找，
 * 		自身中如果有，则直接使用，
 * 		如果没有则去原型对象中寻找，如果原型对象中有，则使用，
 * 		如果没有则去原型的原型中寻找,直到找到Object对象的原型，
 * 		Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
 */

//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));

//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));

//console.log(mc.__proto__.__proto__.__proto__);

//console.log(mc.hello);

//console.log(mc.__proto__.__proto__.__proto__)

3 class创建对象

3.1 class介绍和初体验

//手机
 function Phone(brand,price){
     this.brand=brand;
     this.price=price;

 }
 //添加方法
 Phone.prototype.call=function(){
     console.log("我可以打电话!!");
 }

 //实例化对象
 let huawei=new Phone('hauwei',5999);
 huawei.call();
 console.log(huawei)

//class
class Shouji{
    constructor(brand,price){
        this.brand=brand;
        this.price=price
    }
    //方法必须使用该语法，不能使用es5的对象完整形式
    call(){
        console.log("我可以打电话!!")
    }
} 
let onePlus=new Shouji('huawei',5999)
onePlus.call()
console.log(onePlus)

3.2 class静态成员

// function Phone(){

// }
// Phone.name = '手机';
// Phone.change = function(){
//     console.log("我可以改变世界");
// }
// Phone.prototype.size = '5.5inch'
// let nokia = new Phone()
// console.log(nokia.name);
// // nokia.change();
// console.log(nokia.size)
class Phone{
    //静态属性
    static name = '手机';
    static change(){
        console.log("我可以改变世界");
    }

let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);

3.3 es6 es5构造函数继承

//手机
function Phone(brand,price){
    this.brand=brand;
    this.price=price;
}
//添加方法
Phone.prototype.call=function(){
    console.log("我可以打电话!!");
}

//只能手机
function SmartPhone(brand,price,color,size){
    Phone.call(this,brand,price);
    this.color=color;
    this.size=size;
}

//设置子级构造函数的原型
SmartPhone.prototype=new Phone;
//SmartPhone.prototype.constructor=SmartPhone;

//声名子类的方法
SmartPhone.prototype.photo=function(){
    console.log("我可以拍照")
}
SmartPhone.prototype.playgame=function(){
    console.log("我可以玩游戏")
}

const iphone=new Phone('piguo',5499)
console.log(iphone)

const chuizi=new SmartPhone('cuizi',2499,'heise','5.5inch')
console.log(chuizi)

3.4 es6 class的类继承

class Phone{
    //构造函数
    constructor(brand,price){
        this.brand=brand;
        this.price=price
    }
    //父类成员属性
    call(){
        console.log("我可以打电话!!")
    }
}

class SmartPhone extends Phone{
    //构造函数
    constructor(brand,price,color,size){
        super(brand,price);//phone.call(this,brand,price)
        this.color=color;
        this.size=size;
    }

    photo(){
        console.log("photo");
    }

    playgame(){
        console.log("playgame");
    }

}

const iphone=new Phone("piguo",5999);
iphone.call();
console.log(iphone);
const chuizi=new SmartPhone('chuizi',2999,'heise','5.5inch')
chuizi.call();
chuizi.photo();
chuizi.playgame();
console.log(chuizi)

3.5 class子类对父类方法的重写

class Phone{
    //构造函数
    constructor(brand,price){
        this.brand=brand;
        this.price=price
    }
    //父类成员属性
    call(){
        console.log("我可以打电话!!")
    }
}

class SmartPhone extends Phone{
    //构造函数
    constructor(brand,price,color,size){
        super(brand,price);//phone.call(this,brand,price)
        this.color=color;
        this.size=size;
    }

    photo(){
        console.log("photo");
    }

    playgame(){
        console.log("playgame");
    }
    call(){
        console.log("我可以进行视频通话");
    }

}

const iphone=new Phone("piguo",5999);
iphone.call();
console.log(iphone);
const chuizi=new SmartPhone('chuizi',2999,'heise','5.5inch')
chuizi.call();
chuizi.photo();
chuizi.playgame();
console.log(chuizi)
weixin_57709891
关注
专栏目录
JavaScript — this关键字、使用工厂方法创建对象、构造函数
m0_59897687的博客
01-31 1152
目录 一、this关键字 二、使用工厂方法创建对象 三、构造函数 instanceof 一、this关键字 解析器在调用函数每次都会向函数内部传递进一个隐含的参数， 这个隐含的参数就是this，this指向的是一个对象， 这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象 1.以函数的形式调用时，this永远都是window 2.以方法的形式调用时，this就是调用方法的那个对象 举个例子： ...
JavaScript-构造函数创建对象(类)
tian_tian_gong的博客
02-13 3738
使用工厂方法创建对象， 对象实例的类型都是Object，不容易区分对象。 比如，创建一个人的对象， 和创建一个狗狗的对象，打印出来对象的类型都是Object， 很难区分。 这种情况， 用构造函数方法创建对象， 就可以解决了。 注意: 创建构造函数， 习惯首字母大写。 构造函数和普通函数的区别: 调用: 普通函数直接调用， 构造函数需要使用new关键字来调用。 this: 1.当以函数的形...
js 使用工厂方法创建多个对象
qq_36571836的博客
09-23 108
//当你需要创建多个 属性和方法特别相似的对象的时候---我们可以封装一个函数，来调用这个函数来 快速创建对象。 /* 使用工厂方法创建对象 通过该方法可以大批量的创建对象 */ function createMyPerson(name, age, sex) { let obj = new Object(); //创建一个新的对象 obj.name = name; // 为新的对象添加属性 obj.age = age; obj.sex = sex' obj.sayN
使用工厂方法创建对象以及用构造函数创建对象
hff945的博客
12-03 314
工厂方法可以大批量创建对象，该方法创建的对象，使用构造函数都是object <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <.
JavaScript工厂模式创建对象和自定义构造函数的区别
越努力，越幸运！
12-11 991
工厂模式 【1】定义 工厂模式是一种软件工程领域一种广为人知的设计模式，这种模式抽象了创建对象的过程，因为ECMAScript无法穿类，所以开发人员就发明一个函数，用函数来封装以特定的接口创建对象。简单理解：通过函数封装对象，并通过调用函数来调用封装的对象。通过调用多次函数从而创建多次不同的对象。 【2】代码 工厂模式有返回值，因为通过调用函数会把把函数返回值（这里就是函数封装的对象obj）给返回，然后我们通过声明一个变量person1去接收，此时变量person1里面存的就是对象，然后通过对象调用
10 - JavaScript对象的创建&构造函数
JayYuen的博客
10-21 2019
创建自定义对象的几种方法 方式一：对象字面量 对象的字面量就是一个{}。里面的属性和方法均是键值对。 例如： var o = { name: "小米", age: 26, isBoy: true, sayHi: function() { console.log(this....
JavaScript-用工厂函数构造函数创建对象
weixin_62467970的博客
06-24 934
当然了此时输入的日期是无效日期，不过这不重要，重要的是我们能用构造函数的原型属性向新对象的原型添加reserve方法使新对象能将预定信息添加到schedule上，这就是我们进行原型继承的方式。此外我们可以设置多个原型对象，应用到工厂函数中，用不同的原型对象创建出不同的对象(Object.create())，为我们提供了原型对象更多的可能性，这就是有些人使用工厂函数创建对象的原因。工厂函数可以添加原型，用多个类型的原型对象创建多个对应类型的对象，为我们提供了原型对象更多的可能性；
自定义构造函数创建对象和工厂模式创建对象的区别
小鱼儿~同学
08-05 1563
自定义构造函数创建对象的方式 function Person() { this.name=name; this.age=age; this.sex=sex; this.play=function(){ console.log("喜欢唱歌"); } }; //创建对象-----&gt;实例化一个对象的同时对属性进行初始化 var per=new Perso...
JavaScript系列从入门到精通系列第二十篇：使用工厂方法创建JavaScript对象，JavaScript构造函数详解，JavaScript类概念的介绍
热门推荐
七叔的博客
10-17 1万+
这个是JavaScript系列从入门到精通系列中第二十篇，详细介绍了使用工厂方法创建JavaScript对象，以及对JavaScript构造函数进行了详解，也包括对JavaScript类概念的介绍
web前端-JavaScript构造函数创建对象
苏凉.py的博客
06-16 1356
JavaScript 构造函数(Constructor)也称为构造器、类型函数,功能类似对象模板,一个构造函数可以生成任意多个实例,实例对象具有相同的属性、行为特征,但不相等。 使用构造函数可以创建不同类的对象。构造函数就是一个普通的函数。创建方式和昔通函数没有区别,不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用方式的不同三种形式this的指向情况。使用同一个构造函数创建的对象,我们称为一类对象，也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象,称为是该类的实例。就上述而言Ob
javascript工厂模式和构造函数模式创建对象方法解析
11-28
1. **对象识别**：构造函数模式优于工厂模式，因为每个由构造函数创建的对象都有自己的类型信息（即`typeof`返回`"object"`，`instanceof`返回对应的构造函数）。 2. **共享行为**：两者都可以通过原型链实现方法和...
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
01-21
虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象，但这种方式有一个明显的缺点：使用一个接口创建多个对象会产生很多冗余的代码。因此为了解决这个问题，人们开始使用以下几种方式来常见...
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
10-17
构造函数模式下，没有显示地创建对象，直接将属性和方法赋给`this`对象。例如： ```javascript function Parent(name, age) { this.name = name; this.age = age; this.sayHi = function() { console.log("Hi");...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 874
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 590
【代码】【JavaScript】LeetCode：707设计链表。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 511
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 470
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 895
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 278
动态在本地引入图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值