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====女

请看代码后的注释,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);

最终的结果如下:
这里写图片描述
当然,个人感觉那个prototype没有说的很好,如果看到这篇博客的你有更好的建议或意见的话,欢迎给我留言。还有call和apply,其实它们的作用是一样的,都是改变this指向,然后它们的区别也可以从代码中看出,传参方式不同。

多态

最后要说多态了,写这篇文章之前,自己对多态还是处于懵逼的状态,查阅了不少其他同行的博客,以及W3C 上的解释,把这些总结了一下,多态就是在执行同一操作且作用于不同对象时,返回不同的结果 。其实也就是把做什么和由谁去做分开,这样使得代码更容易维护,且条例清晰。直接上例子吧:

function dwn(s){
	document.write(s+"<br/>");
}
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
*/
  • 38
    点赞
  • 79
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值