javascript原型

目录

一、原型对象

1、构造方法的原型对象

 2、对象的原型对象

3、原型对象的原型对象

 二、实例对象和原型对象

三、访问对象的构造方法

1、构造方法的作用

2、访问方式

 3、举例

 四、原型链结构的特点

五、成员查找机制

---

 

一、原型对象

每个构造函数(类)都有一个原型对象(默认存在),该原型对象可以通过prototype属性进行访问。

1、构造方法的原型对象

(1)、构造方法的原型对象是object类型

(2)、prototype属性是默认存在的

(3)、原型对象的作用

A、共享方法

function Person(){ //ES5(ECMAScript5)语法:Person是类名(构造方法名)
    
} 

var p1 = new Person('张三');
var p2 = new Person('李四');
//通过原型对象给Person增加方法
Person.prototype.showAddress = function(address) {
    console.log("地址：",address);
}
//p1、p2共享方法
p1.showAddress("xx市xx区")
p2.showAddress("xx市xx区")

B、共享属性

function Person(name){ //ES5(ECMAScript5)语法:Person是类名(构造方法名)
    this.name = name;
} 

var p1 = new Person('张三');
var p2 = new Person('李四');
//通过原型对象给Person增加方法
Person.prototype.showName = function(){
    console.log("姓名：",this.name);
}

//p1、p2共享属性
p1.showName();
p2.showName();

 2、对象的原型对象

每个对象都有一个默认的属性_ _proto_ _属性,该属性指向对象的原型对象。

注意：proto为双下划线。

class Person{
    constructor(name,address){
        this.name=name;
        this.address=address;
    }
}
console.log(Person.prototype); //输出Person类的原型

Person.prototype.showName = function(){
    console.log("姓名：",this.name);
}
Person.prototype.showAddress = function(){
    console.log("地址：",this.address);
}

var p1 = new Person('老王','xx区')
console.log("p1的原型对象：",p1.__proto__)

3、原型对象的原型对象

原型对象本质也是一个对象，所以他也有自己的原型对象。

查看原型对象的原型对象的方法：构造方法名/类名.prototype.__proto__

 二、实例对象和原型对象

 

(1)、实例对象：使用new运算符创建的对象叫实例对象。

(2)、原型对象：A、通过构造方法名(类名).prototype得到的对象 。

                          B、通过对象的__proto__属性得到的对象。

实例对象不能共享方法。

三、访问对象的构造方法

1、构造方法的作用

用来初始化对象。

2、访问方式

(1)、通过原型对象来访问构造方法： 构造方法名(类名).prototype.constructor

(2)、通过实例对象访问构造方法： 对象名.constructor

class Student{
    constructor(name,gender){
        this.name = name;
        this.gender = gender;
    }
}
var s1 = new Student("郭靖","男"); //ES6中不能显式调用构造方法,而是通过类名调用
var s2 = new Student("黄蓉","女");
console.log("原型对象访问构造方法：",Student.prototype.constructor)
console.log("实例对象访问构造方法：",s1.constructor)

 3、举例

用赋值方式修改原型对象为新的对象，就无法访问构造器函数。

 四、原型链结构的特点

      (1)每个构造函数都有一个原型对象：通过prototype属性访问
       
      (2)原型对象通过constructor属性指回构造函数
       
      (3)实例对象通过__proto__属性指向原型对象
       
      (4)Object的原型对象的__proto__是null

原型链结构图：

 

五、成员查找机制

        (1)先在对象中查找
        
        (2)若对象中没有,继续查找原型对象的原型对象
        
        (3)若仍没有找到,则返回undefined

function Person(){
    this.name = "张三";
}
Person.prototype.name = "李四";

var  p = new Person();
console.log("姓名1：",p.name) //先在对象中查找
delete p.name //删除对象p的成员name

console.log("姓名2：",p.name) //再到原型对象中找
delete Person.prototype.name //删除原型对象中的name

console.log("姓名3：",p.name)//输出undefined