JS——面向对象
Posted 高圈圈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——面向对象相关的知识，希望对你有一定的参考价值。
创建对象的方式：
1）单体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象——单体</title> <script type="text/javascript"> var Tom = { name: ‘tom‘, age:18, showname:function(){ alert(this.name); }, showage:function(){ alert(this.age); } }; alert(Tom.age); Tom.showname(); </script> </head> <body> </body> </html>
2）工厂模式：通过一个函数来创建对象（开料、装配、出厂）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工厂模式</title>
<script type="text/javascript">
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.showname = function () {
alert(this.name);
};
o.showage = function () {
alert(this.age);
};
return o;
}
var Tom = Person(‘tom‘,18,‘engineer‘);
Tom.showname();
Tom.showage()
</script>
</head>
<body>
</body>
</html>
3）构造函数（方法重复，缺点是占用内存）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数</title>
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showname = function () {
alert(this.name);
}
}
var Tom = new Person(‘tom‘,18,‘engineer‘);
Tom.showname()
</script>
</head>
<body>
</body>
</html>
4）原型模式（创建类）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型模式</title>
<script type="text/javascript">
function Person(name,age,job) {
this.name = name;
this.job = job;
this.age = age;
}
//在prototype上绑定方法，该方法可以实现不同实例的共用
Person.prototype.showname = function () {
alert(this.name);
};
var Tom = new Person(‘tom‘,18,‘engineer‘);
var Jack = new Person(‘jack‘,19,‘worker‘);
Tom.showname();
Jack.showname();
</script>
</head>
<body>
</body>
</html>
继承：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<script type="text/javascript">
function Fclass(name,age) {
this.name =name;
this.age = age;
}
Fclass.prototype.showname = function () {
alert(this.name);
};
Fclass.prototype.showage = function () {
alert(this.age);
};
//属性继承：用call或者apply的方法继承
function Sclass(name,age,job) {
//改变当前函数执行的this对象:指向了子类实例化的对象
// call:aa.call(‘abc‘,2,3)
//apply:aa.apply(‘abc‘,[2,3])
Fclass.call(this,name,age);
this.job = job;
}
//方法继承：将父类的一个实例赋值给子类的原型属性
Sclass.prototype = new Fclass();
Sclass.prototype.showjob = function(){
alert(this.job);
};
var Tom = new Sclass(‘tom‘,18,‘engineer‘);
Tom.showage();
Tom.showname();
Tom.showjob();
</script>
</head>
<body>
</body>
</html>
以上是关于JS——面向对象的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象