JavaScript的面向对象编程(二)
2022/2/26 14:22:47
本文主要是介绍JavaScript的面向对象编程(二),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
构造函数与原型对象
1.构造函数
构造函数:构造函数主要用来创建对象,并为对象的成员赋初始值。
function Person(name, age) { this.name = name; this.age = age; } var p1 = new Person('张三', 18); var p2 = new Person('李四', 19); console.log(p1.name); // 输出结果:张三 console.log(p2.age); // 输出结果:19
2.静态成员和实例成员
实例成员是指实例对象的成员,而静态成员是指通过类或构造函数访问的成员。
class Student{ constructor(name){ this.name = name; } show(){ console.log("学校:",Student.school); console.log("姓名:",this.name); } } Student.school = "邮电大学"; //添加静态成员school var s1 = new Student("张三"); var s2 = new Student("李四"); s1.show(); s2.show();
3.原型对象
原型对象:每个构造函数都有一个原型对象存在,这个原型对象通过构造函数的prototype属性来访问。
function Person() {} // 定义函数 console.log(Person.prototype); // 输出结果:Person {} console.log(typeof Person.prototype); // 输出结果:object
注意:
- 构造方法的原型对象是object类型
- prototype属性是默认存在的
案例:利用原型对象共享方法
function Person(name){ this.name = name; function sayHello(){ console.log("西安"); } } //输出Person的原型对象 console.log("Person的原型对象:",Person.prototype); //构造方法的原型是什么类型: console.log("原型对象的类型:",typeof Person.prototype); var p1 = new Person("张三"); var p2 =new Person("李四"); //通过原型对象给Person增加方法 Person.prototype.showAddress = function(address){ console.log("地址:",address); } Person.prototype.showName = function(){ console.log("姓名:",this.name); } p1.showAddress("西安市长安区"); p2.showAddress("西安市雁塔区"); console.log(p1.showAddress === p2.showAddress); //结果为true p1.showName(); p2.showName();
原型链
1.访问对象的原型对象
对象的原型对象:每个对象都有一个__proto__属性,这个属性指向了对象的原型对象。
function Person() {} var p1 = new Person(); console.log(p1.__proto__); //输出结果:Person {} console.log(p1.__proto__ === Person.prototype); // 输出结果:true
2.实例对象与原型对象
(1)实例对象
实例对象:使用new运算符创建的对象。
(2)原型对象
- 通过构造方法名(类名).prototype得到的对象
- 通过对象的__proto__属性得到的对象
3.实例对象与原型对象的关系
4.访问对象的构造方法
对象的构造函数:在原型对象里面有一个constructor属性,该属性指向了构造函数。
(1)通过原型对象访问构造函数
构造方法名(类名).prototype.constructor
function Student(name,gender){ //构造方法 this.name = name; this.gender = gender; } var s1 = new Student("郭靖","男"); var s2 = new Student("黄蓉","女"); console.log("原型对象访问构造方法:",Student.prototype.constructor); console.log("原型对象访问构造方法:",Student.prototype.constructor === Student); //结果为true
(2)通过实例对象访问构造方法
对象名.constructor
function Student(name,gender){ //构造方法 this.name = name; this.gender = gender; } var s1 = new Student("郭靖","男"); var s2 = new Student("黄蓉","女"); console.log(s1.constructor); //实例对象方法构造方法
案例:用赋值方式修改原型对象为新的对象,就无法访问构造器函数。
function Person(){} var p1 = new Person(); console.log("构造方法:",p1.constructor); //结果为:构造方法: function Person(){} Person.prototype = { satHello: function(){ //方法一 console.log("Hello"); } } // Person.prototype.satHello = funtion(){ //方法二,通过原型给对象增加一个方法 // console.log("Hello"); // } var p2 = new Person(); console.log("构造方法:",p2.constructor); //结果为:构造方法: function Object() { [native code] }
5.构造函数、原型对象和实例对象之间的关系
6.原型对象的原型对象
原型对象的原型对象:原型对象也是对象,那么这个对象应该也会有一个原型对象存在。
function Person(){} //输出Person的原型对象 console.log("Person的原型对象:",Person.prototype); //输出结果为:Person的原型对象: Person {} //输出Person的原型对象的原型对象 console.log("Person的原型对象的原型对象:",Person.prototype.__proto__); //输出结果为:Person的原型对象的原型对象: {} //输出Person的原型对象的原型对象的构造方法 console.log("Person的原型对象的原型对象的构造方法:",Person.prototype.__proto__.constructor); //Person的原型对象的原型对象的构造方法: function Object() { [native code] }
7.原型链结构特点
- 每个构造函数都有一个prototype属性指向原型对象。
- 原型对象通过constructor属性指向构造函数。
- 通过实例对象的__proto__属性可以访问原型对象。
- Object的原型对象的__proto__属性为null。
原型链结构图:
8.成员查找机制
- JavaScript首先会判断实例对象有没有这个成员
- 如果没有找到,就继续查找原型对象的原型对象
- 如果直到最后都没有找到,则返回undefined。
function Person(){ this.name = "张三"; } Person.prototype.name = "李四"; var p = new Person(); console.log(p.name); //输出结果为:张三 delete p.name; //删除对象p的name属性 console.log(p.name); //输出结果为:李四 delete Person.prototype.name; //删除原型对象的name属性 console.log(p.name); //输出结果为:undefined
9.【案例】利用原型对象扩展数组方法
Array.prototype.sum = function(){ var sum = 0; for(var i=0;i<this.length;i++){ sum += this[i]; } return sum; } var arr = new Array(1,2,3); console.log(arr.sum()); //输出结果为6
这篇关于JavaScript的面向对象编程(二)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-16基于Java+Springboot+Vue开发的体育用品商城管理系统
- 2024-09-16基于Java+Springboot+Vue开发的口腔牙科诊所预约管理系统
- 2024-09-16如何基于Java解析国密数字证书
- 2024-09-15Spring Boot项目开发教程:快速入门与实战指南
- 2024-09-15单点登录实战:入门级指南与实操详解
- 2024-09-15登录校验实战:从零构建安全登录系统
- 2024-09-15Java知识库系统学习:从零开始的编程之旅
- 2024-09-15JAVA知识库系统学习:从零基础到入门的全面指南
- 2024-09-15Java主流技术学习:从入门到进阶的实用指南
- 2024-09-15JAVA主流技术学习:从入门到提升