JavaScript构造函数的方法与原型对象

Posted 2021-06-16 小刘编码员

 

前言：各位csdn的源员们，大家好。我是小刘，初来乍到请大家多多指教，这是第10次发表博客，如有错误请大家观看后谅解，并在评论区留下您宝贵的意见，小刘将会用最大的努力去改正以及认真对待每一次代码的编写，请大家一定要多多包涵，你们的支持是我继续努力的最大动力，当然大家觉得不错可以关注我喔，带你走遍代码的每一个角落，让你感受代码的神奇之处。

 

首先我向大家透露一点点小方法，一定要认真观看喔！
 

本次用到的编程软件：DW
 

本次涉及到的内容：html,css以及javascript

 

44.javaScript构造函数

创建一个构造函数，专门用来Cat对象

 构造函数就是一个普通的函数，创建方式和普通函数没有区别，

不同的是构造函数习惯上首字母大写 

构造函数和普通的函数区别就是调用方式的不同

普通函数就是直接调用，而构造函数使用new关键字来调用

 

构造函数的执行流程

1.立即出创建一个新的对象

2.将新建的对象设置给函数中的this,在构造函数中可使用this来引用新建的对象

3.逐行执行函数的代码

4.将新建的对象作为返回值返回

 

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

也将一个构造函数称为一个类

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

 

对this情况进行总结：

  1.当函数的形式调用时，this就是window对象 

  2.当以方法的形式调用时，this就是调用方法的这个对象

  3.当以构造函数的形式调用时，this就是新建的的对象

 

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为一个类，在控制台所输出的值则是用this方法所调用的值

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 构造

如果时实例，则返回true,否则返回false

 

45.javaScript构造函数2

在创建一个person构造函数

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

目前我们的方法都是构造方法内部创建的，也就是构造函数没执行一次就是创建一个虚拟的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,"男");//构造函数

在代码中创建一个新的方法。

46.javaScript对象的原型

    我们创建的每一个函数，解析器都会向函数中添加一个属性prototype

    这个属性对应着一个对象，这个对象就是所谓的原型对象

   如果函数作为普通函数的调用prototype没有任何作用

   当函数以构造的原型对象，我们可以通过--proto-- 来访问该属性

 

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

对象中共有的内容，统一设置原型对象中。

我们访问对象的一个属性或方法时，它会先在自身中寻找，如果有则直接使用，如果没有

则会去原型对象中寻找，如果找到则直接使用

 

以后我们创建构造函数时，可以将这些对象共有的属性和方法，同i添加到构造

函数的原型对象中，这压根不用分别为每个对象添加，也不会影响到全局作用域，就可以使每个对

象都拒用这些属性和方法了。

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);

其中第一个第二个输出的则是一个对象object， 而第三个输出的则是ture  第四个输出的则是123，

第五个也就是唯一的一个实体类文字了

47.JavaScript原型对象2

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

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

则会返回ture

 

可以使用对象的hasownproperty()方法来检查对象自身中是否函数有该属性

使用该方法只有当对象中自身含有属性时，才会返回true

 

原型对象也是对象，所以他又原型，但我们使用一个对象的属性或方法时

会现在自身中寻找

    如果自身中有，则直接使用

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

原型的原型对象中寻找，知道找到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__);

 

 

本次编程结束，谢谢大家观看！！