脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript之----面向对象和原型，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

JavaScript之----面向对象和原型，ECMAScript有两种开发模式：1、函数式(过程化)，面向对象(oop)【好处：有了引用类型的对象可直接调用这个对象对应的方法】 任何一个事物都可以看成是一个对象 1、创建对象 VAR stu1 = new Object(); //小丽 等于 新 老婆(); stu1.name="小丽";//属性name就是一个变量 stu1.study =function(){ alert("我叫"+this.name+"爱学习"); }; //实现学习这个功能，行为 定义为函数 alert.name; alert.study();

这种方式创建了多个学生对象，重复性代码很多

2、使用工厂模式创建对象：解决实例化对象产生大量重复的问题(属性和行为时一样的) function createObj(name,age){ var obj = new Object(); obj.names =name; obj.ages = age; obj.study = function(){ alert("我叫"+this.names+"今年"+this.ages+"爱学习"); }; return obj;//返回的是对象的引用 } var stu3 =createObj("张三"，23);//var stu3 = obj; //解释一下子：return obj 最后把obj这个对象返回了，返回的是个引用(var obj = new Object();)，stu3接收到了obj这个引用,引用里存放的是new Object()这个对象的内存地址，所以stu3接收到的是这个对象的地址,stu3也就指向了张三这个对象

var stu4 =createObj("李四"，22);

工厂模式存在的问题：不能确定对象具体的类型

3、使用构造函数(方法)创建特定的对象：

//根据创建对象来起名字 function Student (name,age){ this.name = name; //后台自动创建了 new Object() this.age = age; //this就指向了这个对象 this.study=function(){ alert(this.name+","+this.age); }; //后台返回了该对象 } var stu1 = new Student("zhang",23); alert(stu1.name); alert(stu1.age); stu1.study(); var stu2 = new Student("李斯",20); alert(stu2.name); alert(stu2.age); stu2.study();

//注意：构造函数和工厂模式的区别： 1、构造函数中直接给name、age赋值，没有显示的创建对象(new object()); 2、直接将属性和方法赋值给this对象; 3、没有使用return返回;

构造函数的特点： (1)、定义构造函数是 构造函数的函数名首字母大写，为了和普通函数区分 (2)、使用构造函数时必须使用new(这样才能生成一个新的对象)例如：var stu1 =new Student("zhang",23); 把构造函数当成普通函数调用：Student(“张三”,40);没有任何意义(X)因为这个函数没有返回值，得不到对象，只有new之后，后台才能返回对象。 (3)、alert(stu1 instanceof Student); //判断stu1具体什么类型的实力，判断stu1是不是Student这种类型的，显示true 或 flase (4)、构造函数中的函数study 是一个引用类型变量存放的是函数的地址(函数的引用)每new一个对象中的函数study的地址是不同的

4、使用原型 原型的好处：实现了数据的共享。 引用类型中都含有PRototyPE(原型)属性,该属性指向对象 var obj = { country:"中国"; };//定义一个对象，给对象定义一个country属性值为中国

function Student (name,age){ this.name = name; this.age = age; this.study=function(){ alert(this.name+","+this.age); }; }

Student.prototype =obj;//把Student的原型设置为obj对象(把Student引用类型的这种函数的prototype属性指向obj这个对象) var stu1 = new Student("zhang",23); var stu2 = new Student("li",20); alert(stu1.country);//显示中国 alert(stu2.country);//显示中国

注意：是给创建对象的这个构造函数定义原型，从而使用Student创建的对象中都具备了原型对象obj中的这个内容。

prototype写成 _ _proto_ _

 

如果是一个对象，看他的原型对象：obj.__proto__(用__proto__)

stu1._ _proto_ _ 得到stu1的原型对象

stu1._ _proto_ _._ _proto_ _ 得到的是obj的原型对象 obj._ _proto_ _ 得到的是obj的原型对象

显示的也是一个object类型的一个对象 obj._ _proto_ _._ _proto_ _ //显示的是空 最基本的object类型中就没有原型对象了 得到的是obj的原型对象的原型对象

//判断一个对象是否指向了构造函数的原型对象 alert(Student.prototype.isPrototypeOf(stu1));//返回的是true 或是flase 解释一下：判断stu1是不是指向了构造函数Student的原型对象 比较谁isPrototypeOf(***) ***就写谁

stu1.name 指的是stu1对象中的属性name值 如果原型对象中也有个name var obj = { country:"中国"; name:"tom"; }; stu1.name 还是指的是stu1对象中的属性name值

说明：对象中含有name属性则优先使用对象中的属性，如果对象中没有的属性再到原型中查找有没有需要的属性 (构造方法中自己有的属性就用自己的，没有的再用原型中的)

①hasOwnProperty()方法：判断是否自己含有的属性

alert(stu1.hasOwnProperty('name')); //显示true 对象stu1中本身就有name属性

②'name' in stu1 这种方法是看一下stu1中(无论是自身还是原型中)是否含有name属性

Student中如果不设置prototype属性的值，他也含有默认的object对象(Student本身就含有prototype原型对象)

Student.prototype =obj;覆盖了Student的原有的原型对象

obj的原型对象是object

 

obj具备object里面的属性和方法

Student具备obj里面的属性和方法也具备object里面的属性和方法

默认原型和设置的原型的区别： var stu = new Student("zhang",22); 构造 constructor属性 stu .constructor表示stu这个对象的构造方法是什么

如果使用的是默认原型object时，stu .constructor使用的构造函数是 function Student(name,age){} 如果使用的是obj这个原型时，stu .constructor使用的构造函数是obj 的构造方法 就是 functionObject(){}这个构造方法

如果我们用的是Student.prototype = obj;这个原型时，但是我们想用的是Student这个构造方法所以在原型对象要这样写： var obj ={ constructor:Student, //要加上这句，意思是强制创建的stu对象时使用的构造方法为Student方法 country:"中国" }; 或者不覆盖原型，向原型对象中添加一个新属性(在Student原有的原型对象中添加一个country属性，使用的是本来的默认原型对象) Student.prototype.country = "中国" 这两种方式，建议使用第一种方式

function Student (){} Student.prototype = { name:"xin", age:22, family:['妈妈','爸爸'], fun:function(){ return this.name; } }; 这样是有问题的， 创建的任何一个对象的姓名和年龄都相同了，对于引用类型放到原型中，若一个对象进行其修改，其他对象都变化了。(对特有的属性应定义在构造函数中，而共享的定义在原型当中)解决这个问题利用构造函数+原型 这种模式 如下：

5、使用构造函数+原型 function Student (name,age){ //每个对象特有的数据使用构造函数 this.name = name; this.age = age; this.family =['妈妈','爸爸']; }

Student.prototype = { //所有对象共享的内容定义在原型对象中 fun:function(){ return this.name +this.age+this.family; } }

var stu1 = new Student("liso",20); stu1.family.push("姐姐");//给stu1的family中添个姐姐 alert(stu1.family);//显示的是 妈妈 爸爸 姐姐 var stu2 = new Student("zhao",21); alert(stu2.family);//显示的是 妈妈 爸爸 这样就互不影响了

6、使用动态原型

动态原型模式：将两部分写在一起

function Student (name,age){ this.name = name; this.age = age; this.family =['妈妈','爸爸'];

//原型直接写在构造函数当中 alert("原型被初始化开始"); Student.prototype.fun =function(){ return this.name +this.age+this.family; } alert("原型被初始化结束");

}

var stu1 = new Student("liso",20); alert(stu1.fun());//显示liso,20，妈妈 爸爸

var stu2 = new Student("zhang",24); alert(stu2.fun());//显示zhang24妈妈 ，爸爸

这样存在一个问题：每次创建对象时都会把原型代码初始化一次，应该第一次初始化一次，之后就不用初始化了，所以在外面加一个判断：

function Student (name,age){ this.name = name; this.age = age; this.family =['妈妈','爸爸']; if(typeof this.fun! = 'function'){ alert("原型被初始化开始"); Student.prototype.fun =function(){ return this.name +this.age+this.family; } //注：动态原型模式只能这样写,不能Student.prototype={}这样直接给prototype赋值对象 alert("原型被初始化结束");

} }

var stu1 = new Student("liso",20); alert(stu1.fun());

var stu2 = new Student("zhang",24); alert(stu2.fun());

7、使用寄生构造函数：工厂模式+构造函数

function Student (name,age){

var obj = new Object(); obj.name=name; obj.age = age; obj.fun= function(){ returnthis.name+this.age); }; return obj; } var stu = new Student("zhang",23); alert(stu.fun);

这种模式不能实现共享，不建议使用

8、使用稳妥构造函数：在一些安全的环境中，比如禁止使用this 和 new,这里的this是构造函数里不能使用this，这里的new是在外部实例化构造函数时不能使用new function Person(name,age){ var obj = new Object(); boj.fun = function(){ return name +age;//直接使用参数的值 } rerun obj; } var person = Person("lisi",24);//不能使用new创建对象 alert(person.fun());//显示lisi24

了解这种模式就行

alert(Array.prototype.sort);//显示function sort(){} 说明sort是原型对象中的一个方法 String.prototype.substr // 如上sort

js内部定义的引用类型也都是含有原型的,并可以添加方法，但不建议这样使用，因为容易发生命名冲突

String.prototype.myStr = function(){ ---- 功能---- } //给string的原型对象中添加一个方法

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript之----面向对象和原型全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript之----面向对象和原型所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。