JS原型及原型链

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

一、创建对象的方式

1、Java语法中，创建对象的方式

①通过构造函数

2、JS语法中，创建对象的方式

①通过普通方式（直接new Object）

②通过字面量{ }

③通过自定义构造函数（即：Java中的构造器/构造函数）

二、原型（prototype）

1、原型的概念

举例：

在控制台查看原型：

2、原型的简写

3、案例：给String类添加一个原型方法（静态方法）

三、继承的概念

1、Java语法中的继承

2、JS语法中的继承

举例：

四、原型与原型链

1、结论一：任何函数都有一个属性为原型（prototype）对象，并且里面的constructor属性指向函数本身。

举例：

2、结论二：对象中，也有原型对象，只不过不是叫prototype，而是叫_ _proto_ _，这两个对象本质上是一个。即：对象和构造它的构造函数，拥有同一个原型对象，只是名称不一致，一个叫prototype，一个叫_ _proto_ _。

举例：

类比：就好比java中，一个类的静态变量/静态方法，在该类的对象实例中也会存在这个静态变量/静态方法，只不过我们平时不建议通过对象实例来调用，因为通过类直接就可以调用。

3、原型对象是由Object函数构造的。因此原型对象也会有一个原型对象，和Object函数中的原型对象是同一个对象。（这就叫原型链）

举例：

示意图：

注意：由于Object是顶级父类，因此Object()构造函数中的原型对象就不再往上指了，因此为null。

4、思考1：对象为什么有toString方法？

原型链：下图中，红色的箭头，就是原型链。

5、结论4

①函数也是对象（因为万物皆对象），因此函数也会有__proto__，指向的是Function的原型对象（二者本质是一个）

②原型对象prototype也是对象，因此也会有__proto__，最终都是指向顶级父类Object的原型对象。

示意图：

6、思考2：为什么所有函数都会有call方法？

五、综合应用1：Vue框架中，vue实例对象（vm）与组件对象（vc）的原型链分析

结语

一、创建对象的方式

1、Java语法中，创建对象的方式

①通过构造函数

运行结果：

2、JS语法中，创建对象的方式

①通过普通方式（直接new Object）

//通过new Object，创建一个对象
let student1 = new Object();
student1.id='001'
student1.name='jack'
student1.sayHi = function(){
    console.log("我叫"+this.name+",id是"+this.id)
}

//访问该对象的属性和方法
console.log(student1.name)
student1.sayHi()

运行结果：

②通过字面量{ }

//通过字面量，声明对象
let student1 = {
    id:'001',
    name:'Jack',
    sayHi:function(){
        console.log("我叫"+this.name+",id是"+this.id)
    }
}

//访问该对象的属性和方法
console.log(student1.name)
student1.sayHi()

运行结果：

③通过自定义构造函数（即：Java中的构造器/构造函数）

//自定义构造函数
function Student(id,name){
    this.id = id;
    this.name = name;
    this.sayHi = function(){
        console.log("我叫"+this.name + ',id是'+this.id)
    }
}

//通过自定义构造函数，创建对象
let student1 = new Student('001', 'tom');
let student2 = new Student('002', 'lucy');

//访问对象的属性和方法
console.log(student1.name)
student1.sayHi()
console.log(student2.name)
student2.sayHi()

运行结果：

二、原型（prototype）

1、原型的概念

原型就类似于Java中的静态（static）这个含义。

说白了，原型是用来定义某个类的类变量/类方法的。

原型也是一个对象，里面的属性和方法都是类的静态属性和静态方法。

举例：

//自定义构造函数
function Student(id, name) {
    this.id = id;
    this.name = name;
    this.sayHi = function () {
        console.log("我叫" + this.name + ',id是' + this.id)
    }
}
//定义Student类的原型
Student.prototype.count = 100  //原型（静态）属性
Student.prototype.study = function(){  //原型（静态）方法
    console.log('共享学习空间')
}

//通过自定义构造函数，创建对象
let student1 = new Student('001', 'tom');
let student2 = new Student('002', 'lucy');


//访问对象的原型属性和方法
console.log(student1.count)
console.log(student2.count)
console.log(student1.count === student2.count)
console.log(student1.study)
console.log(student2.study)
console.log(student1.study === student2.study)

运行结果：

在控制台查看原型：

2、原型的简写

3、案例：给String类添加一个原型方法（静态方法）

let str = new String("helloworld")
//给String类添加一个原型方法（静态方法）
String.prototype.myJoin = function(){
    console.log("我是String类新增的原型方法")
}

//查看str对象的内容
console.log(str)

//调用str对象的myJoin方法
str.myJoin()

运行结果：

三、继承的概念

1、Java语法中的继承

2、JS语法中的继承

首先声明，在JS中，没有继承这个功能。因此我们只能借助原型，来实现继承这个功能。

举例：

//自定义Person构造函数
function Person(id, name){
    this.id = id
    this.name = name
    this.eat = function(){
        console.log('人吃饭')
    }
}

//自定义Teacher构造函数
function Teacher(edu){
    this.edu = edu
    this.teach = function(){
        console.log('教师教书')
    }
}

//利用原型来让Teacher继承Person，说白了此时这个Person对象是Teacher类的静态。
Teacher.prototype = new Person(1,'王强')

//创建Teacher类的对象实例teacher
let teacher = new Teacher('博士')
teacher.teach()
teacher.eat()
console.log(teacher.id, teacher.name, teacher.edu)

运行效果：

四、原型与原型链

1、结论一：任何函数都有一个属性为原型（prototype）对象，并且里面的constructor属性指向函数本身。

举例：

//自定义构造函数，有属性为prototype原型对象，且其中的constructor属性也指向String()函数本身
function Person(id, name){
    this.id = id
    this.name = name
}

console.log(Person.prototype.constructor === Person)

//官方自带的String()函数，也有属性为prototype原型对象，且其中的constructor属性也指向String()函数本身
console.log(String.prototype.constructor === String)

运行结果：

2、结论二：对象中，也有原型对象，只不过不是叫prototype，而是叫_ _proto_ _，这两个对象本质上是一个。即：对象和构造它的构造函数，拥有同一个原型对象，只是名称不一致，一个叫prototype，一个叫_ _proto_ _。

举例：

//自定义构造函数
function Person(id, name){
    this.id = id
    this.name = name
    this.eat = function(){
        console.log('人吃饭')
    }
}

//利用自定义构造函数，创建一个对象p1
let p1 = new Person('001','张三')

//查看对象p1的__proto和构造函数Person的prototype是否是同一个对象
console.log(Person.prototype === p1.__proto__)//true

运行结果：

类比：就好比java中，一个类的静态变量/静态方法，在该类的对象实例中也会存在这个静态变量/静态方法，只不过我们平时不建议通过对象实例来调用，因为通过类直接就可以调用。

3、原型对象是由Object函数构造的。因此原型对象也会有一个原型对象，和Object函数中的原型对象是同一个对象。（这就叫原型链）

举例：

//自定义构造函数
function Person(id, name){
    this.id = id
    this.name = name
    this.eat = function(){
        console.log('人吃饭')
    }
}


//Person构造函数，有一个原型对象(Person.prototype)。
//且该原型对象中，还有一个原型对象(Person.prototype.__proto__)（因为是对象，就会有一个属性为原型对象），指向构造函数Object的原型对象（Object.prototype）。
console.log(Person.prototype.__proto__ === Object.prototype)//true

运行结果：