老生常谈javascript的面向对象思想


Posted in Javascript onAugust 22, 2017

面向对象的三大基本特性

封装(把相关的信息(无论数据或方法)存储在对象中的能力)

继承(由另一个类(或多个类)得来类的属性和方法的能力)

多态(一个对象在不同情况下的多种形态)

定义类或对象

第一种:基于Object对象

var person = new Object();
person.name = "Rose";
person.age = 18;
person.getName = function () {
 return this.name;
};
console.log(person.name);//Rose
console.log(person.getName);//function () {return this.name;}
console.log(person.getName());//Rose

缺点:不能创建多个对象。

第二种:基于字面量方式

var person = {
 name : "Rose",
 age : 18 ,
 getName : function () {
  return this.name;
 }
};
console.log(person.name);//Rose
console.log(person.getName);//function () {return this.name;}
console.log(person.getName());//Rose

优点:比较清楚的查找对象包含的属性和方法;

缺点:不能创建多个对象。

第三种:工厂模式

方式一:

function createPerson(name,age) {
 var object = new Object();
 object.name = name;
 object.age = age;
 object.getName = function () {
  return this.name;
 };
 return object;
}
var person1 = createPerson("Rose",18);
var person2 = createPerson("Jack",20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//false//重复生成函数,为每个对象都创建独立的函数版本

优点:可以创建多个对象;

缺点:重复生成函数getName(),为每个对象都创建独立的函数版本。

方式二:

function createPerson(name,age) {
 var object = new Object();
 object.name = name;
 object.age = age;
 object.getName = getName;
 return object;
}
function getName() {
 return this.name;
}
var person1 = createPerson("Rose",18);
var person2 = createPerson("Jack",20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享同一个函数

优点:可以创建多个对象;

缺点:从语义上讲,函数getName()不太像是Person对象的方法,辨识度不高。

第四种:构造函数方式

方式一:

function Person(name,age) {
 this.name = name;
 this.age = age;
 this.getName = function () {
  return this.name;
 }
}
var person1 = new Person("Rose",18);
var person2 = new Person("Jack",20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName); //false//重复生成函数,为每个对象都创建独立的函数版本

优点:可以创建多个对象;

缺点:重复生成函数getName(),为每个对象都创建独立的函数版本。

方式二:

function Person(name,age) {
 this.name = name;
 this.age = age;
 this.getName = getName ;
}
function getName() {
 return this.name;
}
var person1 = new Person("Rose",18);
var person2 = new Person("Jack",20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName); //true//共享同一个函数

优点:可以创建多个对象;

缺点:从语义上讲,函数getName()不太像是Person对象的方法,辨识度不高。

第五种:原型方式

function Person() {
}
Person.prototype.name = 'Rose';
Person.prototype.age = 18;
Person.prototype.getName = function () {
 return this.name;
};
var person1 = new Person();
var person2 = new Person();
console.log(person1.name);//Rose
console.log(person2.name);//Rose//共享同一个属性
console.log(person1.getName === person2.getName);//true//共享同一个函数

缺点:它省略了为构造函数传递初始化参数,这在一定程序带来不便;另外,最主要是当对象的属性是引用类型时,它的值是不变的,总是引用同一个外部对象,所有实例对该对象的操作都会影响其它实例:

function Person() {
}
Person.prototype.name = 'Rose';
Person.prototype.age = 18;
Person.prototype.lessons = ["语文","数学"];
Person.prototype.getName = function () {
 return this.name;
};
var person1 = new Person();
person1.lessons.push("英语");
var person2 = new Person();
console.log(person1.lessons);//["语文", "数学", "英语"]
console.log(person2.lessons);//["语文", "数学", "英语"]//person1修改影响了person2

第六种:构造函数+原型方式(推荐)

function Person(name,age) {
 this.name = name;
 this.age = age;
}
Person.prototype.getName = function () {
 return this.name;
};
var person1 = new Person('Rose', 18);
var person2 = new Person('Jack', 20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享原型中定义的方法

缺点:属性定义在构造函数内,方法定义在构造函数外,与面向对象的封装思想不符。

第七种:构造函数+动态原型方式(推荐)

方式一:

function Person(name,age) {
 this.name = name;
 this.age = age;
 if (typeof Person._getName === "undefined"){
  Person.prototype.getName = function () {
   return this.name;
  };
  Person._getName = true;
 }
}
var person1 = new Person('Rose', 18);
var person2 = new Person('Jack', 20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享原型中定义的方法

方式二:

function Person(name,age) {
 this.name = name;
 this.age = age;
 if (typeof this.getName !== "function"){
  Person.prototype.getName = function () {
   return this.name;
  };
 }
}
var person1 = new Person('Rose', 18);
var person2 = new Person('Jack', 20);
console.log(person1.name);//Rose
console.log(person2.name);//Jack
console.log(person1.getName === person2.getName);//true//共享原型中定义的方法

对象属性的扩展及删除

Javascript的对象可以使用 '.' 操作符动态的扩展其属性,可以使用 'delete' 关键字或将属性的值设置为 'undefined' 来删除属性。

function Person(name,age) {
 this.name = name;
 this.age = age;
 if (typeof Person._getName === "undefined"){
  Person.prototype.getName = function () {
   return this.name;
  };
  Person._getName = true;
 }
}
var person = new Person("Rose",18);
person.job = 'Engineer';//添加属性
console.log(person.job);//Engineer
delete person.job;//删除属性
console.log(person.job);//undefined//删除属性后值为undefined
person.age = undefined;//删除属性
console.log(person.age);//undefined//删除属性后值为undefined

对象属性类型

数据属性

特性:

[configurable]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;

[enumberable]:表示是否可通过for-in循环返回属性。默认true;

[writable]:表示是否可修改属性的值。默认true;

[value]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性,其值为'My name',对该值的修改都反正在这个位置

function Person(name,age) {
 this.name = name;
 this.age = age;
 if (typeof Person._getName === "undefined"){
  Person.prototype.getName = function () {
   return this.name;
  };
  Person._getName = true;
 }
}
var person = new Person("Rose",18);
Object.defineProperty(person,"name",{configurable:false,writable:false});
person.name = "Jack";
console.log(person.name);//Rose//重新赋值无效
delete person.name;
console.log(person.name);//Rose//删除无效

注意:

一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:cannot redefine property : propertyName)

function Person(name,age) {
 this.name = name;
 this.age = age;
 if (typeof Person._getName === "undefined"){
  Person.prototype.getName = function () {
   return this.name;
  };
  Person._getName = true;
 }
}
var person = new Person("Rose",18);
Object.defineProperty(person,"name",{configurable:false,writable:false});
person.name = "Jack";
console.log(person.name);//Rose//重新赋值无效
delete person.name;
console.log(person.name);//Rose//删除无效
Object.defineProperty(person,"name",{configurable:true,writable:true});//Cannot redefine property: name

访问器属性

特性:

[configurable]:是否可通过delete操作符删除重新定义属性;

[numberable]:是否可通过for-in循环查找该属性;

[get]:读取属性时调用,默认:undefined;

[set]:写入属性时调用,默认:undefined;

访问器属性不能直接定义,必须使用defineProperty()或defineProperties来定义:如下

function Person(name,age) {
 this.name = name;
 this._age = age;
 if (typeof Person._getName === "undefined"){
  Person.prototype.getName = function () {
   return this.name;
  };
  Person._getName = true;
 }
}
var person = new Person("Rose",18);
Object.defineProperty(person,"age",{
 get:function () {
  return this._age;
 },
 set:function (age) {
  this._age = age;
 }});
person.age = 20;
console.log(person.age);//20//person.age=20是使用set方法将20赋值给_age,person.age是使用get方法将_age的读取出来
console.log(person._age);//20

获取所有的属性和属性的特性

使用Object.getOwnPropertyNames(object)方法可以获取所有的属性;

使用Object.getOwnPropertyDescriptor(object,property)方法可以取得给定属性的特性;

function Person(name,age) {
 this.name = name;
 this._age = age;
 if (typeof Person._getName === "undefined"){
  Person.prototype.getName = function () {
   return this.name;
  };
  Person._getName = true;
 }
}
var person = new Person("Rose",18);
Object.defineProperty(person,"age",{
 get:function () {
  return this._age;
 },
 set:function (age) {
  this._age = age;
 }});
console.log(Object.getOwnPropertyNames(person));//["name", "_age", "age"]
console.log(Object.getOwnPropertyDescriptor(person,"age"));//{enumerable: false, configurable: false, get: function, set: function}

对于数据属性,可以取得:configurable,enumberable,writable和value;

对于访问器属性,可以取得:configurable,enumberable,get和set;

继承机制实现

对象冒充

function Father(name) {
 this.name = name ;
 this.getName = function () {
  return this.name;
 }
}
function Son(name,age) {
 this._newMethod = Father;
 this._newMethod(name);
 delete this._newMethod;

 this.age = age;
 this.getAge = function () {
  return this.age;
 }
}
var father = new Father("Tom");
var son = new Son("Jack",18);
console.log(father.getName());//Tom
console.log(son.getName());//Jack//继承父类getName()方法
console.log(son.getAge());//18

多继承(利用对象冒充可以实现多继承)

function FatherA(name) {
 this.name = name ;
 this.getName = function () {
  return this.name;
 }
}
function FatherB(job) {
 this.job = job;
 this.getJob = function () {
  return this.job;
 }
}
function Son(name,job,age) {
 this._newMethod = FatherA;
 this._newMethod(name);
 delete this._newMethod;
 this._newMethod = FatherB;
 this._newMethod(job);
 delete this._newMethod;

 this.age = age;
 this.getAge = function () {
  return this.age;
 }
}
var fatherA = new FatherA("Tom");
var fatherB = new FatherB("Engineer");
var son = new Son("Jack","Programmer",18);
console.log(fatherA.getName());//Tom
console.log(fatherB.getJob());//Engineer
console.log(son.getName());//Jack//继承父类FatherA的getName()方法
console.log(son.getJob());//Programmer//继承父类FatherB的getJob()方法
console.log(son.getAge());//18

call()方法

function Father(name) {
 this.name = name ;
 this.getName = function () {
  return this.name;
 }
}
function Son(name,job,age) {
 Father.call(this,name);

 this.age = age;
 this.getAge = function () {
  return this.age;
 }
}
var father = new Father("Tom");
var son = new Son("Jack","Programmer",18);
console.log(father.getName());//Tom
console.log(son.getName());//Jack//继承父类getName()方法
console.log(son.getAge());//18

多继承(利用call()方法实现多继承)

function FatherA(name) {
 this.name = name ;
 this.getName = function () {
  return this.name;
 }
}
function FatherB(job) {
 this.job = job;
 this.getJob = function () {
  return this.job;
 }
}
function Son(name,job,age) {
 FatherA.call(this,name);
 FatherB.call(this,job);

 this.age = age;
 this.getAge = function () {
  return this.age;
 }
}
var fatherA = new FatherA("Tom");
var fatherB = new FatherB("Engineer");
var son = new Son("Jack","Programmer",18);
console.log(fatherA.getName());//Tom
console.log(fatherB.getJob());//Engineer
console.log(son.getName());//Jack//继承父类FatherA的getName()方法
console.log(son.getJob());//Programmer//继承父类FatherB的getJob()方法
console.log(son.getAge());//18

apply()方法

function Father(name) {
 this.name = name ;
 this.getName = function () {
  return this.name;
 }
}
function Son(name,job,age) {
 Father.apply(this,new Array(name));

 this.age = age;
 this.getAge = function () {
  return this.age;
 }
}
var father = new Father("Tom");
var son = new Son("Jack","Programmer",18);
console.log(father.getName());//Tom
console.log(son.getName());//Jack//继承父类getName()方法
console.log(son.getAge());//18

多继承(利用apply()方法实现多继承)

function FatherA(name) {
 this.name = name ;
 this.getName = function () {
  return this.name;
 }
}
function FatherB(job) {
 this.job = job;
 this.getJob = function () {
  return this.job;
 }
}
function Son(name,job,age) {
 FatherA.apply(this,new Array(name));
 FatherB.apply(this,new Array(job));

 this.age = age;
 this.getAge = function () {
  return this.age;
 }
}
var fatherA = new FatherA("Tom");
var fatherB = new FatherB("Engineer");
var son = new Son("Jack","Programmer",18);
console.log(fatherA.getName());//Tom
console.log(fatherB.getJob());//Engineer
console.log(son.getName());//Jack//继承父类FatherA的getName()方法
console.log(son.getJob());//Programmer//继承父类FatherB的getJob()方法
console.log(son.getAge());//18

原型链方法

function Father() {
}
Father.prototype.name = "Tom";
Father.prototype.getName = function () {
 return this.name;
};
function Son() {
}
Son.prototype = new Father();
Son.prototype.age = 18;
Son.prototype.getAge = function () {
 return this.age;
};
var father = new Father();
var son = new Son();
console.log(father.getName());//Tom
console.log(son.getName());//Tom//继承父类FatherA的getName()方法
console.log(son.getAge());//18

混合方式(call()+原型链)

function Father(name) {
 this.name = name;
}
Father.prototype.getName = function () {
 return this.name;
};
function Son(name,age) {
 Father.call(this,name);
 this.age = age;
}
Son.prototype = new Father();
Son.prototype.getAge = function () {
 return this.age;
};
var father = new Father("Tom");
var son = new Son("Jack",18);
console.log(father.getName());//Tom
console.log(son.getName());//Jack//继承父类Father的getName()方法
console.log(son.getAge());//18

多态机制实现

function Person(name) {
 this.name = name;
 if (typeof this.getName !== "function"){
  Person.prototype.getName = function () {
   return this.name;
  }
 }
 if (typeof this.toEat !== "function"){
  Person.prototype.toEat = function (animal) {
   console.log( this.getName() + "说去吃饭:");
   animal.eat();
  }
 }
}
function Animal(name) {
 this.name = name;
 if (typeof this.getName !== "function"){
  Animal.prototype.getName = function () {
   return this.name;
  }
 }
}
function Cat(name) {
 Animal.call(this,name);
 if (typeof this.eat !== "function"){
  Cat.prototype.eat = function () {
   console.log(this.getName() + "吃鱼");
  }
 }
}
Cat.prototype = new Animal();
function Dog(name) {
 Animal.call(this,name);
 if (typeof this.eat !== "function"){
  Dog.prototype.eat = function () {
   console.log(this.getName() + "啃骨头");
  }
 }
}
Dog.prototype = new Animal();

var person = new Person("Tom");
person.toEat(new Cat("cat"));//Tom说去吃饭:cat吃鱼
person.toEat(new Dog("dog"));//Tom说去吃饭:dog啃骨头

以上这篇老生常谈javascript的面向对象思想就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序实现评论功能
Nov 28 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
基于node.js之调试器详解
Aug 22 #Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 #Javascript
简单实现js上传文件功能
Aug 21 #Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 #Javascript
JavaScript实现简单图片轮播效果
Aug 21 #Javascript
Javascript中 toFixed四舍六入方法
Aug 21 #Javascript
You might like
PHP开发APP端微信支付功能
2017/02/17 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python 如何区分return和yield
2020/09/22 Python
python实现逻辑回归的示例
2020/10/09 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
2014年3.15团委活动总结
2014/03/16 职场文书
2014年中秋寄语
2014/08/11 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
高考1977观后感
2015/06/04 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
运动会加油稿50字
2015/07/21 职场文书
新学期开学寄语2016
2015/12/04 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
尝试使用Python爬取城市租房信息
2022/04/12 Python