转:https://segmentfault.com/a/1190000011061136

前言

前一阵面试,过程中发现问到一些很基础的问题时候,自己并不能很流畅的回答出来。或者遇到一些基础知识的应用,由于对这些点理解的不是很深入,拿着笔居然什么都写不出来,于是有了回顾一下这些基础知识的想法。

首先就是面试中经常会问到的,JS是怎么实现继承的,其实问到继承,面试官想问的可能还是你对JS面向对象的理解吧。

这一部分的主要参考资料:《JavaScript高级程序设计》、《JavaScript设计模式》
如果有什么错误的地方,也希望看到这篇文章的小伙伴给我指出来,谢谢 ^_^

一、对象

1.1创建对象

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。
一个简单的对象创建:

var People = {
name : "eavan",
age : 24,
getName : function(){
alert(this.name); //eavan
}
}

使用的时候就可以用People.name,获取People这个对象的name属性,或者是People.getName()来得到People的name值。
另一种对象创建方式:



var People = new Object();
People.name = "eavan";
People.age = 24;
People.getName = function(){
alert(this.name);
}

这里用到了new,就顺便提一下在使用new的时候发生了什么,其实在使用new的时候,大致可以认为做了这三件事,看下面的代码:

var People  = {};                      //我们创建了一个空对象People
People.__proto__ = Object.prototype; //我们将这个空对象的__proto__成员指向了Object函数对象prototype成员对象
Object.call(People); //我们将Object函数对象的this指针替换成People,然后再调用Object函数

1.2封装

简单来说就是对一些属性的隐藏域暴露,比如私有属性、私有方法、共有属性、共有方法、保护方法等等。而js也能实现私有属性、私有方法、共有属性、共有方法等等这些特性。

像java这样的面向对象的编程语言一般会有一个类的概念,从而实现封装。而javascript中没有类的概念,JS中实现封装主要还是靠函数。

首先声明一个函数保存在一个变量里面。然后在这个函数(类)的内部通过对this变量添加属性或者方法来实现对类添加属相或者方法。

var Person = function(){
var name = "eavan"; //私有属性
function checkName(){}; //私有方法 this.myName = "gaof"; //对象共有属性
this.myFriends = ["aa","bb","cc"];
this.copy = function(){} //对象共有方法 this.getName = function(){ //构造器方法
return name;
};
}

纯构造函数封装数据的问题是:对像this.copy = function(){}这种方法的创建,其实在执行的时候大可不必绑定到特定的对象上去,将其定义到全局变量上也是一样的,而且其过程相当于实例化了一个Function,也大可不必实例化这么多其实干同一件事的方法。而这个小问题的解决可以用原型模式来解决。

1.3理解原型

在每创建一个函数的时候,都会生成一个prototype属性,这个属性指向函数的原型对象。而其是用来包含特定类型的所有实例共享的属性和方法。所以,直接添加在原型中的实例和方法,就会被所有实例所共享。

同样还是上面的Person的例子,我们可以为其原型添加新的属性和方法。

Person.isChinese = true;                          //类的静态共有属性(对象不能访问)
Person.prototype.sex = "man" ; //类的共有属性
Person.prototype.frends = ["gao","li","du"];
Person.prototype.isBoy = function(){}; //类的共有方法

原型封装数据的问题:对绑定在prototype上的引用类型的变量,由于被所有对象所共有,其中某一个对象对该数据进行修改,当别的对象访问该数据的时候,所访问到的值就是被修改后的。
比如如下代码:

var person1 = new Person();
person1.frends.push("dd");
console.log(person1.frends); //["gao", "li", "du", "dd"]
var person2 = new Person();
person2.frends.push("ee");
console.log(person2.frends); //["gao", "li", "du", "dd", "ee"]

原本希望对person1和person2的friends属性分别添加新的内容,结果二者的friends属性居然是“公用”的!

综上,最常见的方式应该是组合使用构造函数和原型模式,构造函数用于定义实例属性,原型模式用于定义方法和共享的属性。

每个类有三部分构成:第一部分是构造函数内,供实例对象化复制用。第二部分是构造函数外,直接通过点语法添加,供类使用,实例化对象访问不到。第三部分是类的原型中,实例化对象可以通过其原型链间接访问到,也是为所有实例化对象所共用。

在说到对象实例的属性的时候,我们有一个问题,就是在访问一个属性的时候,这个属性是属于实例,还是属于这个实例的原型的呢?

比如还是上面的例子,我们为person2实例增加一个sex属性,这时候访问person2的sex属性时,得到的是我们增加的值。说明为对象实例添加一个属性的时候,这个属性就会屏蔽原型对象中保存的同名属性。

   person2.sex = "woman";
console.log(person1.sex); //man
console.log(person2.sex); //woman

这个时候我们可以使用hasOwnProperty()方法来检测一个属性是存在于实例中,还是存在于原型中。如果实例中有这个属性,hasOwnProperty()会返回true,而hasOwnProperty()并不会感知到原型中的属性。所以可以用这个方法检测属性到底是存在于实例中还是原型中。

console.log(person1.hasOwnProperty("sex"));        //原型中的属性,返回false
console.log(person2.hasOwnProperty("sex")); //实例中的属性,返回true

二、继承

ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

2.1 原型链继承

如下代码:

function Super(){
this.val = true;
this.arr = ["a"];
}
function Sub(){
//...
}
Sub.prototype = new Super(); var sub = new Sub();
console.log(sub.val) //true

以上代码定义了Super和Sub两个类型,继承的核心就一句话:Sub.prototype = new Super() 将父类的一个实例赋给子类的原型。这样子类就能够使用父类实例所拥有的方法和父类原型中的方法。

这种情况要想给子类添加自己的方法或者是覆盖父类中某个方法的时候,一定要在放在替换原型语句后面。否则写在原型上的方法都会丢失。

而且在给子类添加新方法的时候,不能使用字面量的方式添加新方法,这样会导致继承无效。
如:

Sub.prototype = new Super();
Sub.prototype = { //错误的方式
getVal : function(){
//...
}
}

以上代码刚刚把Super的实例赋给原型,紧接着又将原信替换成一个对象字面量,导致现在原型包含的是一个Object的实例,并非Super的实例,因此原型链被切断了,Sub和Super已经没有关系了。

原型链的问题:
最主要的问题有两个:一是由于引用类型的原型属性会被所有实例所共享,所以通过原型链继承时,原型变成了另一个类型的实例,原先的实例属性也就变成了现在的原型属性,如下代码:

function Super(){
this.friends = ["peng","gao"];
}
function Sub(){
//...
}
Sub.prototype = new Super();
var sub1 = new Sub();
var sub2 = new Sub();
sub1.friends.push("du");
console.log(sub2.friends); //["peng", "gao", "du"]

这个例子说明的就是上面的问题,子类的所有实例共享了父类中的引用类型属性。

原型链继承的另一个问题是在创建子类行的实例的时候,没法向父类的构造函数传递参数。

2.2 构造函数继承

具体实现:

function Super(){
this.val = true;
this.arr = ["a"];
}
function Sub(){
Super.call(this);
}
var sub = new Sub();
console.log(sub.val) //true

这种模式这是解决了原型链继承中出现的两个问题,它可以传递参数,也没有了子类共享父类引用属性的问题。
但这种模式也有他的问题,那就是在父类原型中定义的方法,其实是对子类不可见的。

2.3组合继承

既然上述的两种方式各有各自的局限性,将它俩整合到一起是不是会好一点呢,于是就有了组合继承。

function Super(){
this.val = true;
this.arr = ["a"];
}
function Sub(){
Super.call(this); //{2}
}
Sub.prototype = new Super(); //{1}
Sub.prototype.constructor = Sub; //{3}
var sub = new Sub();
console.log(sub.val) //true

组合继承还有一个要注意的地方:
在代码{3}处,将子类原型的constructor属性指向子类的构造函数。因为如果不这么做,子类的原型是父类的一个实例,所以子类原型的constructor属性就丢失了,他会顺着原型链继续往上找,于是就找到了父类的constructor所以它指向的其实是父类。

这种继承方式是使用最多的一种方式。
这种继承方式解决了上两种方式的缺点,不会出现共享引用类型的问题,同时父类原型中的方法也被继承了下来。

如果要说起有什么缺点我们发现,在执行代码{1}时,Sub.prototype会得到父类型的val和arr两个属性。他们是Super的实例属性,只不过现在在Sub的原型上。而代码{2}处,在创建Sub实例的时候,调用Super的构造函数,又会在新的对象上创建属性val和arr,于是,这两个属性就屏蔽了原型中两个同名属性。

2.4寄生组合式继承

对于上面的问题,我们也有解决办法,不是在子类原型中多了一份父类的属性和方法么,那我原型中就只要父类原型中的属性和方法,这里我们引入了一个方法:

function inheritObject(obj){
var F = function(){};
F.prototype = obj;
return new F();
}

这个方法创建了一个对象临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。

我们可以设想,如果用这个方法拷贝一份父类的原型属性给子类,是不是就避免了上面提到的子类原型中多了一份父类构造函数内的属性。看如下代码:

function Super(){
this.val = 1;
this.arr = [1];
}
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){}; function Sub(){
Super.call(this);
}
var p = inheritObject(Super.prototype); //{1}
p.constructor = Sub; //{2}
Sub.prototype = p; //{3} var sub = new Sub();

基本思路就是:不必为了指定子类型的原型而调用父类的够着函数,我们需要的无非就是父类原型的一个副本而已。本质上就是复制出父类的一个副本,然后再将结果指定给子类型的原型。

三、多态

所谓多态,就是同一个方法的多种调用方式,在javascript中,通过arguments对象对传入的参数做判断就可以实现多种调用方式。

例子:

 
function Add(){
function zero(){
return 10;
}
function one(num){
return 10 + num;
}
function two(num1, num2){
return num1 + num2;
}
this.add = function(){
var arg = arguments,
len = arg.length;
switch (len){
case 0:
return zero();
case 1:
return one(arg[0]);
case 2:
return two(arg[0], arg[1]);
}
}
}
var A = new Add();

前端面试回顾---javascript的面向对象的更多相关文章

  1. 前端面试之JavaScript的基本数据类型!

    前端面试之JavaScript的基本数据类型! JS的基本数据类型 数字 字符串 布尔值 JavaScript中有两个特殊的原始值: null (空) 和undefined (未定义), , 它们不是 ...

  2. 前端面试之JavaScript中数组的方法!【残缺版!!】

    前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...

  3. 前端面试之JavaScript中的闭包!

    前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...

  4. 前端面试回顾(1)---javascript的面向对象

    前言 前一阵面试,过程中发现问到一些很基础的问题时候,自己并不能很流畅的回答出来.或者遇到一些基础知识的应用,由于对这些点理解的不是很深入,拿着笔居然什么都写不出来,于是有了回顾一下这些基础知识的想法 ...

  5. 前端面试之Javascript

    1,JS基本的数据类型和引用类型: (1)基本数据类型:number,string,null,undefined,symbol--栈: (2)引用数据类型:object,array,function- ...

  6. 前端知识点回顾——Javascript篇(二)

    JavaScript的解析顺序 第一阶段:编译期 寻找关键字声明的变量.函数声明的变量,同时会对变量进行作用域的绑定 var声明的变量,在编译期会赋一个默认值undefined,变量提升的特性. ES ...

  7. 前端面试之JavaScript中this的指向【待完善!】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  8. 前端面试整理——javascript算法和测试题

    (1)算法: 1.斐波那契数列:1.1.2.3.5.8.13.21.输入n,输出数列中第n位数的值. 方案一: function fn(n){ var num1 = 1, num2= 1, num3 ...

  9. 前端知识点回顾——Javascript篇(六)

    fetch 在原生ajax+es6promise的基础上封装的一个语法糖,返回promise对象. fetch(url, initObj) .then(res=>res.json()) .the ...

随机推荐

  1. Python爬虫入门教程 32-100 B站博人传评论数据抓取 scrapy

    1. B站博人传评论数据爬取简介 今天想了半天不知道抓啥,去B站看跳舞的小姐姐,忽然看到了评论,那就抓取一下B站的评论数据,视频动画那么多,也不知道抓取哪个,选了一个博人传跟火影相关的,抓取看看.网址 ...

  2. 图像识别基本算法之SURF

    图像识别.人脸识别可行的算法有很多.但是作为学习,如果能理清这个问题研究的历程及其主线,会对你深入理解当前研究最新的发展有很多帮助.本文是自己在学习过程中的笔记,大多内容来自于网络,出处请参考最后的引 ...

  3. 在Mac上使用远程X11应用

    XWindows太老了,历史比Windows和Linux的开发时间都长,以至于很多人每天实际在用,但已经不知道它的存在. XWindows目前是Linux/类Unix系统上的标准显示配置,QT/GTK ...

  4. 《两地书》--Kubernetes(K8s)基础知识(docker容器技术)

    大家都知道历史上有段佳话叫“司马相如和卓文君”.“皑如山上雪,皎若云间月”.卓文君这么美,却也抵不过多情女儿薄情郎. 司马相如因一首<子虚赋>得汉武帝赏识,飞黄腾达之后便要与卓文君“故来相 ...

  5. (五)通过Python的select监控多个描述符实现并发连接

    概述 本文通过使用select改写之前的服务器程序通过监控多个套接字描述符来实现并发连接并加入了一些机制让程序更加健壮,不过我们所有的实验都是建立在单词发送数据不会超过1024字节,如果超过你需要做特 ...

  6. HBase查询优化

    1.概述 HBase是一个实时的非关系型数据库,用来存储海量数据.但是,在实际使用场景中,在使用HBase API查询HBase中的数据时,有时会发现数据查询会很慢.本篇博客将从客户端优化和服务端优化 ...

  7. 第一个Mybatis程序示例 Mybatis简介(一)

    在JDBC小结中(可以参阅本人JDBC系列文章),介绍到了ORM,其中Mybatis就是一个不错的ORM框架 MyBatis由iBatis演化而来 iBATIS一词来源于“internet”和“aba ...

  8. 【Axios】前端页面使用axios调用后台接口

    项目基本情况 前端项目是用vue.js做的,前端起的服务URL:http://localhost:8080/ 后端项目是用Node.js做的,后端起的服务URL:http://localhost:30 ...

  9. 权限管理系统之LayUI实现页面增删改查和弹出层交互

    由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一 ...

  10. 细说MVC中仓储模式的应用

    文章提纲 概述要点 理论基础 详细步骤 总结 概述要点 设计模式的产生,就是在对开发过程进行不断的抽象. 我们先看一下之前访问数据的典型过程. 在Controller中定义一个Context, 例如: ...