欢迎来到“雪碧聊技术”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 = idthis.name = namethis.eat = function(){console.log('人吃饭')}
}//自定义Teacher构造函数
function Teacher(edu){this.edu = eduthis.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 = idthis.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 = idthis.name = namethis.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 = idthis.name = namethis.eat = function(){console.log('人吃饭')}
}//Person构造函数,有一个原型对象(Person.prototype)。
//且该原型对象中,还有一个原型对象(Person.prototype.__proto__)(因为是对象,就会有一个属性为原型对象),指向构造函数Object的原型对象(Object.prototype)。
console.log(Person.prototype.__proto__ === Object.prototype)//true
运行结果:
示意图:
注意:由于Object是顶级父类,因此Object()构造函数中的原型对象就不再往上指了,因此为null。
4、思考1:对象为什么有toString方法?
因为顶级父类Object中,有toString()方法,因此通过原型链(类似于继承),所有对象都能获取到这个toString()方法。
原型链:下图中,红色的箭头,就是原型链。
5、结论4
①函数也是对象(因为万物皆对象),因此函数也会有__proto__,指向的是Function的原型对象(二者本质是一个)
②原型对象prototype也是对象,因此也会有__proto__,最终都是指向顶级父类Object的原型对象。
示意图:
6、思考2:为什么所有函数都会有call方法?
因为通过原型链,继承到了Function原型对象中的call方法。
五、综合应用1:Vue框架中,vue实例对象(vm)与组件对象(vc)的原型链分析
结语
以上就是JS的原型、原型链的全部内容。其中这个知识点应用到了Vue中的vm和vc关系,因此我们必须了解这些知识。
想了解更多的JS知识,请关注本博主~~