js面向对象

Posted Angel爽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js面向对象相关的知识,希望对你有一定的参考价值。

 工厂模式

           1、跟现实中的工厂差不多

           2、在函数内部创建了一个新的空对象,最后返回这个对象

           3、缺点:虽然new的是共同的一个函数,但是其中的方法做对比,返回false,也就意思说,new的函数中的方法,不是共享(不是同一个地址). 

 1 //现实中的工厂===>生产一瓶西瓜汁
 2 //1》西瓜   ====>new Object();
 3 //2》榨汁   ====>对象的属性
 4 //3》装瓶,贴商标....  ====>对象的方法
 5 //4》大货车拉出厂子卖
 6 
 7 function createObject(){
 8 
 9     var obj = new Object();
10     obj.name = "西瓜汁"; //属性
11     obj.run = function(){//方法
12 
13         return "贴了商标了";
14     };
15 
16     return obj;//出厂==》卖
17 }
18 
19 var o1 = new createObject();
20 var o2 = new createObject();
21 
22 /*console.log(o1.name);
23 console.log(o2.name);*/
24 /*console.log(o1.run == o2.run);*/

 构造函数模式

和工厂模式区别:

           1、 构造函数中,不需要在内部创建对象(给这个对象添加属性,方法,也不用return 对象)

           2、如果要写构造函数模式,函数的首字母需要大写,像下面这些js的内置对象本质上都是构造函数实例化。

                 new Array()

                 new String()

                 new Date()

                 new RegExp();

           3、缺点:虽然new的是共同的一个函数,但是其中的方法做对比,返回false,也就意思说,new的函数中的方法,不是共享(不是同一个地址). 

 1 function CreateFn(){  //首字母要大写
 2 
 3     this.str = "构造函数";
 4     this.run = function(){
 5 
 6         return "js构造函数方法";
 7 
 8     }
 9 }
10 //1>其实构造函数就是普通函数,只不过首字母需要大写了,为了让别人知道,这个函数是一个构造函数
11 //2>函数内部写变量不在是var str ===> this.str;
12 
13 
14 var obj1= new CreateFn();
15 var obj2= new CreateFn();
16 
17 /*console.log(obj1.str);
18 console.log(obj2.str);*/
19 
20 console.log(obj1.run == obj2.run);

原型模式

           1、每当创建一个函数,都有一个prototype(原型)的属性

           2、原型(prototype)这个属性的指针,指向于一个对象,而这个对象的用途可以由特定类型的所有实例“共享”的方法和属性.

           3、原型(prototype)是共享所有的属性和方法,也就是,如果new了2个函数(实例化),他们的方法是共享的,做对比,返回true,共同使用一个地址

           4、缺点 :因为是共享的方法,公用一个地址,如果后期一个修改,所有对象的方法就都修改了

 1 function fn(){
 2 
 3     fn.prototype.userName = "张三";
 4     fn.prototype.arr = [1,2,3];
 5     //把fn的原型的属性(userName)共享给对象了
 6     fn.prototype.run = function(){
 7 
 8         return "这是一个共享的方法";
 9     }
10 
11 }
12 
13 var obj1 = new fn();
14 var obj2 = new fn();
15 
16 /*
17 console.log(obj1.userName);
18 console.log(obj2.userName);*/
19 //console.log(obj1.run == obj2.run);
20 
21 /*
22 obj1.userName = "李四";
23 console.log(obj1.userName);
24 console.log(obj2.userName);
25 */
26 
27 obj1.arr[1] = "你好数组";
28 console.log(obj1.arr);
29 console.log(obj2.arr);

组合模式:构造函数和原型模式

              1、构造函数:定义实例属性

              2、原型:定义和共享属性

               优点:每一个实例都会有自己的一份实例属性,但又同时共享着方法

 1 function CreateFn(){
 2 
 3     this.userName = "张三";
 4     this.age = 18;
 5     this.arr = [1,2,3];
 6 
 7 };
 8 
 9 CreateFn.prototype.run = function(){
10 
11     return "我是共享的";
12 
13 };
14 
15 var obj1 = new CreateFn();
16 var obj2 = new CreateFn();
17 
18 
19 console.log(obj1.run == obj2.run);
20 
21 
22 obj1.arr[1] = "李四";
23 console.log(obj1.arr);
24 console.log(obj2.arr);

 动态原型模式

      是将所有的信息(属性和方法)都封装在构造函数中,而通过构造函数来初始化原型

      解决:第一个对象实例化的时候就初始化原型,后面的就不需要初始化

 1 function CreateFn(){
 2 
 3     this.userName = "张三";
 4 
 5     if( typeof this.run !="function" ){
 6         console.log(1);
 7         alert(1);
 8         CreateFn.prototype.run = function(){
 9 
10             return "共享的run方法";
11 
12         }
13     }
14 }
15 
16 var obj1 = new CreateFn();
17 var obj2 = new CreateFn();

 

以上是关于js面向对象的主要内容,如果未能解决你的问题,请参考以下文章

js代码片段

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

JS代码预解析原理函数相关面向对象

node.js 是面向对象的么

js 面向对象代码