js中的封装、继承、多态

Javascript是一门解释型的语言，是基于对象的，并不是真正的面向对象的语言，对变量类型的应用也是宽松的，其实它同样可以模拟面向对象的功能：

1 function myfun1(){
2     //这是私有属性
3     var private1 = "这是私有属性";
4     var privateMethod = function(){
5         alert(private1);
6     }
7     //这是实例属性
8     this.publicvar = "这是实例属性";
9     this.public1 = function(){
10         privateMethod();
11     }
12 }

1 var newfun1 = new myfun1();
2 newfun1.public1(); //这是私有属性
3 alert(newfun1.publicvar);//这是实例属性
4 alert(newfun1.private1); // undefined newfun1.privateMethod(); //运行错误

1 function myfun2(){
2 }
3 myfun2.staticvar = "这是静态属性";
4 myfun2.staticmethod = function(){
5 alert(myfun2.staticvar);
6 }
7 var newfun2 = new myfun2();
8 //newfun2.staticmethod();//运行错误;
9 alert(newfun2.staticvar);//undefined

1 //静态私有成员
2 var myfun3 = (function(){
3     function privateProperty(){
4
5     }
6     privateProperty.staticvar = "这是静态私有成员";
7     privateProperty.staticmethod = function(){
8         alert(privateProperty.staticvar);
9     }
10     privateProperty.staticmethod();
11     return privateProperty
12 })();

1 //静态类
2 var funcount = 0;
3 var myfun4 = new function(){
4     funcount++;
5     this.printCount = function(){
6         alert(funcount);
7     }
8 }
9 myfun4.printCount(); //输出1;
10 myfun4.printCount(); //输出1;
11 myfun4.prototype.amethod = function(){
12     alert("原型对象");
13 }//运行错误
14 var newfun4 = new myfun4();
15 newfun4.amethod();

1 //运行错误,说明myfun3创建并实例化之后就不能再为它添加方法,属性
2 new myfun3.constructor().printCount();//如果你确实想实例化,这样也可以.
3 //原型继承
4 var myfun5 = function(){
5
6 }
7 myfun5.prototype.myfun5_extend = function(){
8     alert("这是原型继承的");
9 }
10 var myfun5_sub = function(){
11
12 }
13 myfun5_sub.prototype = new myfun5();
14 var newfun5 = new myfun5_sub();
15 newfun5.myfun5_extend(); //这是原型继承的
16 //调用继承
17 var myfun6 = function(){
18     this.method_p = function(){
19         alert("这是调用继承的");
20     }
21 }
22 var myfun6_sub = function(){
23     myfun6.call(this);
24 }
25
26 var newfun6 = new myfun6_sub();
27 newfun6.method_p();//这是调用继承的
28 //覆盖
29 var myfun7 = function(){
30     this.method = function(){
31         alert("这是父对象方法");
32     }
33 }
34 var myfun7_sub = function(){
35     this.method = function(){
36         alert("这是子对象方法");
37     }
38 }
39 myfun7_sub.prototype = new myfun7();
40 var newfun7 = new myfun7_sub();
41 newfun7.method(); //这是子对象方法,父对象方法被覆盖了.
42 //多态
43 function myfun8(a, b){
44     var a = a;
45     var b = b;
46     if (typeof a == "number" && typeof b == "number") {
47         alert(a * b);
48     } else if (typeof a == "string" && typeof b == "string") {
49         alert(a + b);
50     } else {
51         alert("输入错啦");
52     }
53 }
54
55 myfun8(3, 4); // 输出12;
56 myfun8("hi,", "你好");//输出hi,你好;
57 myfun8("hi", 5);//输入错啦.
58

这里讲了一个最最最简单的JS中基于原型链的继承和多态。

先看一下以下这段代码的实现（A是“父类”，B是“子类”）：

var A = function(){
  this.value = 'a';
  this.showValue = function(){
    console.log(this.value);
  }
}

var a = new A();
a.showValue();

var B = function(){
  this.value = 'b';
};

B.prototype = new A();

var b = new B();
b.showValue();

输出结果为：

"a"
"b"

结果看来实现了一个函数，不同对象的执行，出现不同的结果。

B.prototype = new A(); 这句将A“类”的构造方法，赋值给了B的构造原型，使B能够继承于A。

b.showValue()过程中，先在b中寻找showValue，无果。在b的原型：B，中寻找showValue，而B的prototype已经被A的构造方法赋值，因此再向上一层，在A中找到showValue。因此执行。

摘自：https://www.cnblogs.com/silence516/articles/1509456.html

posted @ 2018-10-12 14:33 sweeeper 阅读(1241) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sweeeper

js中的封装、继承、多态

公告