分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

JS——面向对象

发布时间:2023-09-06 02:00责任编辑:白小东关键词:面向对象

创建对象的方式:

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——面向对象

原文地址:https://www.cnblogs.com/gaoquanquan/p/9201170.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved