原型、原型链与继承

2018-06-24 00:41:38来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

面试中经常考到面向对象的一些知识,在这记录一下,如有不对欢迎指正,愿在前端的道路上共勉!

一、原型

1.什么是原型:  简单说就像css的class一样,是公用的,给DOM元素加个class名就可以公用样式,那么原型就相当于css里面的class,都可以用。

       在构造函数创建出来的时候,系统会默认的帮构造函数创建并关联一个神秘的对象,这个对象就是原型,构造函数的每一个实例都可以访问原型中的成员(一般我们放方法);

2.原型链:(原型链这个概念常考哦~)  首先呢,正如上面所说的,当函数被new操作符调用时,会创建出一个对象,并且该对象中会有一个指向其原型对象的秘密链接(一个非标准属性:_proto_),这样新建的对象(实例)就可以调用相关原型对象中的成员;(咳咳,正题来了哈)但是,原型对象自身也具有对象固有的普遍特征(它也是个对象),因此,也包含了指向其原型对象的链接,因此嘞,就形成了一个链式结构,称之为原型链;

       请原谅我画画的技术:

 

二、继承

1.那么什么又是继承呢:其实就是一个对象没有的成员,但是另一个对象有,给它拿过用;(在现实世界中这好像叫‘借’吧)

2.继承的过程:(这里引用blue老师的一个比喻)  你媳妇他妈跟你要100万,你没有咋办?找你爹,你爹也没有,咋整?找你爹的爹,但是你爹的爹的爹死了,所以你爷爷说家里没有,也就是返回null;(其实写到这里我内心是崩溃的)

3.继承方式:

 1 //1.混入式继承,说是混入式有点高大上,其实就是遍历赋值
 2         function Person(){
 3 
 4         }
 5 
 6         let obj = { 
 7             name:'jack',
 8             age:'18',
 9             sayHello:function(){
10                 console.log('你好,我是'+this.name);
11             }};
12 
13         for( let k in obj){
14             //判断一下obj中的k是不是自己的,当然这不是咱们这篇文章主要研究的
15             if(obj.hasOwnProperty(k)){
16                 //这种不会破坏原型中的constructor的指向
17                 Person.prototype[k] = obj[k];
18             }
19         }
20 
21 
22 
23         //2.经典继承
24         Person.prototype = Object.create(obj);
25         
26         //上面的代码相当于
27         function create(obj){
28             function P(){};
29             P.prototype = obj;
30             return new P();
31         }    
32 
33 
34         //3.借用构造函数,这种方法继承不过去
35         function Person(name,age){
36             this.name = name;
37             this.age = age;
38         }
39 
40         Person.prototype.sayHello = function(){
41             console.log('你好,我是'+this.name);
42         }
43 
44         function Human(name,age){
45             Person.apply(this,arguments);
46         }
47 
48         let p = new Human('jack',18);
49         console.log(p); 
50         p.sayHello();  //p.sayHello is not a function
51 
52 
53 
54         //4.直接替换,会改变obj1的constructor的指向
55         obj1.prototype = obj2.prototype;

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue 2.5 发布了:15篇前端热文回看

下一篇:Element对象 常用属性与常用方法