下面小编就为大家带来一篇老生常谈javascript的面向对象思想。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
面向对象的三大基本特性
封装(把相关的信息（无论数据或方法）存储在对象中的能力)
继承(由另一个类（或多个类）得来类的属性和方法的能力)
多态(一个对象在不同情况下的多种形态)
定义类或对象
第一种：基于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中关于面向对象思想的介绍的详细内容。