（JavaScript）前端小白还没学JS吗？跟着本文开启JS的旅程吧！（六）：构造函数创建、prototype原型对象刨析、查找对象中是否存在对应属性、hasOwnProperty的使用

用户11865655

发布于 2025-10-13 17:35:01

10400

代码可运行

文章被收录于专栏：CSDN专栏CSDN专栏

运行总次数：0

代码可运行

构造函数

创建一个构造函数，专门用来创建Person对象 构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同 普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数的执行流程

立刻创建一个新的对象
将新建的对象设置给函数中的this,在构造函数中可使用this来引用新建的对象
逐行执行函数中的代码
将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，

也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象，称为该类的实例

对this的情况进行总结：

当以函数的形式调用时，this就是window对象
当以方法的形式调用时，this就是调用方法的这个对象
当以构造函数的形式调用时，this就是新创建的对象

//Person 类
function Person(name,age,gender){
	//1. obj 新创建的对象
	//2.obj==>this  
	//3.给obj添加属性或方法 通过this.属性名 
	//4.将obj 作为一个返回值进行返回  return obj
	this.name=name;
	this.age=age;
	this.gender=gender;
	this.sayhello=function(){
		console.log("大家好！我是"+this.name);
	}
}
//Person();//普通函数
var person=new Person("小明",23,"男");//构造函数
var person2=new Person("小红",23,"女");//构造函数
var person3=new Person("小绿",23,"男");//构造函数
var person4=new Person("小蓝",23,"女");//构造函数
console.log(person);//person  是Person这个类的实例
console.log(person2);

function Cat(name,age){
	this.name=name;
	this.age=age;
	this.sayhello=function(){
		console.log("主人您好啊！我是"+this.name);
	}
}
var cat=new Cat("小淘",4);//cat cat1都是Cat类的实例
var cat1=new Cat("小白",4);
console.log(cat);
console.log(cat1);

instanceof

使用instanceof 可以检查一个对象是否是一个类的实例语法：对象 instanceof 构造函数 如果是实例，则返回true，否则返回false

console.log(cat instanceof Person);

内部创建构造函数

在创建一个Person构造函数

在创建Person构造函数中，为每个对象都添加了一个sayhello方法

目前我们的方法都是在构造方法内部创建的，也就是构造函数每执行一次就会创建一个新的sayhello方法，也就是说所有实例的sayhello都是唯一的。这样就导致了构造函数执行一次就会创建一个新的方法，执行多少次就会创建多少个新的方法，而这些方法都是一模一样的，这样就导致了内存空间的浪费，其实我们可以让所有对象共享同一个方法

function Person(name,age,gender){
	this.name=name;
	this.age=age;
	this.gender=gender;
	///定义了一个方法
}
//向原型对象中添加sayhello的方法
Person.prototype.sayhello=function(){
	console.log("大家好！我是"+this.name);
}
var person1= new  Person("小明",23,"男");//构造函数
var person2=new Person("小红",23,"女");//构造函数
var person3=new Person("小绿",23,"男");//构造函数
person1.sayhello();
person2.sayhello();
person3.sayhello();

JavaScript原型prototype

我们创建的每一个函数，解析器都会向函数中添加一个属性prototype 这个属性对应着一个对象，这个对象就是我们所谓的原型对象如果函数作为普通函数调用prototype没有任何作用

当函数以构造函数的形式调用时，它所创建的对象中都有会一个隐藏的属性指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象我们可以将对象中共有的内容，统一设置到原型对象中

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找。如果找到则直接使用以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

function Person(){
		
}
function cat(){
	
}
console.log(Person.prototype);
console.log(cat.prototype);
var p1=new Person();
p1.a="这是实例对象中的属性a";
console.log(p1.__proto__==Person.prototype);

Person.prototype.a=123;
console.log(p1.__proto__.a);
console.log(p1.a);

检测是否存在属性

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，则会返回true

//创建一个构造函数
function Person(){
	
}
Person.prototype.name="原型对象中的name";
var p1=new Person();
p1.name="实例对象中的name属性";
console.log(p1.name);

console.log("name" in p1);
console.log("age" in p1);

可以使用对象的hasOwnProperty()方法来检查对象自身中是否含有该属性 使用该方法只有当对象自身中含有属性是，才会返回true

console.log(p1.hasOwnProperty("name"));

原型对象也是对象，所以它也有原型，但我们使用一个对象的属性或方法时，会先在自身中寻找如果自身中有，则直接使用

如果没有则去原型对象中寻找，如果原型对象中有则使用，如果没有则去原型的原型对象中寻找，直到找到Object对象的原型

Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined

//在p1对象中查找hasOwnProperty属性
console.log(p1.hasOwnProperty("hasOwnProperty"));//false
//在p1对象的原型对象中查找hasOwnProperty
console.log(p1.__proto__.hasOwnProperty("hasOwnProperty"));//false
//在p1原型对象的原型对象中查找hasOwnProperty
console.log(p1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//true

console.log(p1);
console.log(p1.__proto__);
console.log(p1.__proto__.__proto__);

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除

prototype