标签：console log 对象 JavaScript Person 原型 面向对象编程 name
构造函数与原型对象
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
标签：console,log,对象,JavaScript,Person,原型,面向对象编程,name 来源： https://blog.csdn.net/weixin_62343228/article/details/123132192
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。