创建对象的方式:
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