目录前言一、Class类二、es5构造函数三、实例、类的关系实例的原型指向类的原型Constructor四、继承es6继承es5继承的实现总结前言 在es5中实现一个构造函数,并用n
在es5中实现一个构造函数,并用new调用,即可得到一个类的实例。到了es6发布了Class的写法,js的面向对象变成也变得比较规范了。聊到类就不能不说类的构造函数以及类如何继承
定义一个类:
class A {
constructor(name){
this.name = name
}
getName(){
return this.name
}
}
var newA = new A("A")
console.log(newA.getName()) // A
在es5中没有Class的写法,想要实现一个类的写法是这样的:
class A {
constructor(name){
this.name = name
}
getName(){
return this.name
}
}
var newA = new A("A")
console.log(newA.getName()) // A
console.log(newA.__proto__ === A.prototype) // true
关于这个可以了解一下实例化的过程究竟发生了什么,查看MDN的连接:new操作符
console.log(A.prototype.constructor) // Class A
所有的对象都会从原型上继承一个constructor属性,是对函数本身的引用,也就是说指向函数本身。
这里实例newA的原型与A的原型相等,两者的原型的constuctor又都指向A本身。
需要注意的是constrctor是可以被修改的:参照MDN官方实例:constructor
function Type() { };
var types = [
new Array,
[],
new Boolean,
true, // remains unchanged
new Date,
new Error,
new Function,
function(){},
Math,
new Number,
1, // remains unchanged
new Object,
{},
new RegExp,
/(?:)/,
new String,
"test" // remains unchanged
];
for(var i = 0; i < types.length; i++) {
types[i].constructor = Type;
types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ];
};
console.log( types.join("\n") );
只有,true、1、“test”这种只读的原生结构不可被修改constuctor
class Father{
constructor(name){
this.name = name
}
}
class Son extends Father{
constructor(name,sname){
super(name)
this.sname = sname
}
getSon(){
return this
}
}
var newSon = new Son("f","s")
console.log(newSon.getSon()) // Son {name: 'f', sname: 's'}
// 寄生组合继承
function Sub(name){
// 优先执行this绑定,以免覆盖子类的构造的值
// 这里还有一个作用是拷贝了父类属性,避免所有子类共享引用属性!!!!
Person.call(this)
this.name = name || 's'
}
// 复制一份父类的原型,避免修改原型影响其他实例
var fn = function(){}
fn.prototype = Person.prototype
Sub.prototype = new fn()
var sub = new Sub('sub')
sub.showName()
// user extend.html:19
// my name is sub extend.html:21
关于继承详细的可以参考这篇:前端必知必会ES5、ES6的7种继承
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: javascript中的类,继承,构造函数详解
本文链接: https://lsjlt.com/news/140732.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0