Js三大特性--封装、继承以及多态
要分享Js一些基础理论知识，但是在项目中却十分实用。回想之前一次令人心碎的面试，等了将近50分钟，可是面试却不到10分钟，我的心里受到成吨的打击与伤害，以前一直不注重扎实基础，当面试官坐下的那一刻我就感到气氛不对，首先介绍自己软件工程毕业…….然后面试官说介绍一下软件的几大特性……..我…..我说不出话，然后跳过，让我介绍一下闭包、原型、js三大特性，以及在项目中的运用……我的天……当时脑海里浮现的全是我在哪….我是谁…..我在干嘛…..我还要继续坐在这里吗……可能现在说起来比较让人想笑，可是当时的心情确实是很难受的，所以，从那以后，开始注重自己的基础理论知识，好吧，让我们回到正题，let’s go!
封装
首先，我们先了解一下什么是Js封装，就是当你需要隐藏一些属性和方法是，就可以将这些属性和方法封装起来，然后通过一个外部可以调用的特定接口（也可以说是一个公共的方法）进行调用。例如：
function Person(name , age , sex){
this.name = name ; //共有变量
var age = age ; //私有变量
var sex = sex ; //私有变量
this.show = function (){
console.log(age+"===="+sex);
}
}
var person = new Person('Sunshine',18,'女');
console.log(person.age); // undefined
console.log(person.name); // Sunshine
console.log(person.show()); // 18====女
1
2
3
4
5
6
7
8
9
10
11
12
请看代码后的注释，this指向的都是共有的属性和方法，而直接通过var声明的则属于私有变量（即外部不可访问变量），然后通过一个共有的show方法将私有的age和sex输出。当然show方法也要通过this声明才可以哟，否则的话show方法也是不可访问的。
继承
继承其实就是当多个方法存在相同的属性和方法是，就把这些相同的属性和方法提取到一个公共的方法中，通过原型prototype继承该方法，当然你也可以通过call或apply来继承该方法中的属性和方法。
function Person(name , age , sex){
this.name = name ;
this.age = age ;
this.sex = sex ;
this.show = function (){
console.log( this.age + "========"+ this.sex );
}
}
function Student(name , age , sex , score){
this.score = score ;
Person.apply(this,[name , age , sex]);
}
function Worker(name , age , sex , job){
this.job = job ;
Person.call(this,name , age , sex);
}
Dancer.prototype = new Person('Sunshine',18,'女');
function Dancer(salary ){
this.salary = salary ;
}
var student = new Student('Sunshine',18,'女',100);
var worker = new Worker('Sunshine',18,'女','IT');
var dancer = new Dancer(20000);
console.log(student);
console.log(worker);
console.log(dancer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
最终的结果如下：
当然，个人感觉那个prototype没有说的很好，如果看到这篇博客的你有更好的建议或意见的话，欢迎给我留言。还有call和apply,其实它们的作用是一样的，都是改变this指向，然后它们的区别也可以从代码中看出，传参方式不同。
多态
最后要说多态了，写这篇文章之前，自己对多态还是处于懵逼的状态，查阅了不少其他同行的博客，以及W3C 上的解释，把这些总结了一下，多态就是在执行同一操作且作用于不同对象时，返回不同的结果 。其实也就是把做什么和由谁去做分开，这样使得代码更容易维护，且条例清晰。直接上例子吧：
function dwn(s){
document.write(s+"
"); } function Animal(){ this.bite=function(){ dwn("animal bite!"); } } function Cat(){ this.bite=function(){ dwn("Cat bite!"); } } Cat.prototype=new Animal(); ///inherit Animal function Dog(){ this.bite=function(){ dwn("Dog bite"); } } Dog.prototype=new Animal(); ///inherit Animal function AnimalBite(animal){ if(animal instanceof Animal) //这里是判断animal的原型是否指向Animal animal.bite(); } var cat = new Cat(); var dog = new Dog(); AnimalBite(cat); AnimalBite(dog); //最终输出的结果如下： /* Cat bite! Dog bite */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 终于写完了，如果以上有错误的话，欢迎指出~ 如果对你有所帮助的话，请给我一个小心心好吗~ --------------------- 作者：月亮与六便士0520 来源：CSDN 原文：https://blog.csdn.net/qq_22896159/article/details/81779667 版权声明：本文为博主原创文章，转载请附上博文链接！
"); } function Animal(){ this.bite=function(){ dwn("animal bite!"); } } function Cat(){ this.bite=function(){ dwn("Cat bite!"); } } Cat.prototype=new Animal(); ///inherit Animal function Dog(){ this.bite=function(){ dwn("Dog bite"); } } Dog.prototype=new Animal(); ///inherit Animal function AnimalBite(animal){ if(animal instanceof Animal) //这里是判断animal的原型是否指向Animal animal.bite(); } var cat = new Cat(); var dog = new Dog(); AnimalBite(cat); AnimalBite(dog); //最终输出的结果如下： /* Cat bite! Dog bite */ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 终于写完了，如果以上有错误的话，欢迎指出~ 如果对你有所帮助的话，请给我一个小心心好吗~ --------------------- 作者：月亮与六便士0520 来源：CSDN 原文：https://blog.csdn.net/qq_22896159/article/details/81779667 版权声明：本文为博主原创文章，转载请附上博文链接！
