资讯专栏INFORMATION COLUMN

原型链学习面试

Tony / 1638人阅读

摘要:这是实现继承的最通用的方式,这种方法的缺点实例化子类的时候父级的构造函数执行了次,没有必要执行次。

原型链类 创建对象有几种方法

1、字面量对象
var o1 = {name:"1"}
var o11 = new Object({name:"11"})
2、显示构造函数创建
var M = function(){this.name ="o2"}
var o2 = new M();
3.Object.create 方法来创建
var P = {"name":"o3"}
var o3 = Objcet.create(P)

原型、构造函数、实例、原型链 的概念
什么叫实例:

instanceof的原理 new运算符原理
面向对象继承有哪几种
1、借助构造函数实现继承

function Parent1(){
this.name ="Parent1"}
function Child1(){
Parent1.call(this)
this.name = "child1"
}
缺点父类原型链有方法属性,子类拿不到
console.log(new Child1)

2、原型链实现继承

function Parent2() {
    this.name = "Parents2"
    this.type = [1,23]
}
function Child2() {
    this.name = "Child2"
}
// Child2.prototype= new Parent2()
       
    console.log(new Child2)
    var c2 = new Child2
    var c3 = new Child2
    c3.type.push(3)
    
    缺点:修改实例继承父类的属性,都会改变

3、组合继承

 function Parent3() {
        this.name = "Parents3";
        this.play = [1, 23, 3];
    }
    function Child3() {
        Parent3.call(this)
        this.type = "child3"
    }
    Child3.prototype = new Parent3()
  var  c3 = new Child3()
   var c4 = new Child3()
    console.log(c3.play);
    console.log(c4.play);
    c3.play.splice(1, 1)
    console.log(c3.play);
    console.log(c4.play);
    
    组合继承的优点就是修改实例的属性,不会改变父类的属性。
    这是实现继承的最通用的方式,这种方法的缺点实例化子类的时候父级的构造函数执行了2次,没有必要执行2次。所以出了优化方法

4、优化方式

function Parent4() {
        this.name = "Parents4";
        this.play = [1, 23, 3];
    }
    function Child4() {
        Parent3.call(this)
        this.type = "child4"
    }
    Child4.prototype = Parent4.prototype
   var c5 = new Child4()
 var   c6 = new Child4()
    console.log(c4.play);
    console.log(c5.play);
    c3.play.splice(1, 1)
    console.log(c4.play);
    console.log(c5.play);
首先通过call方法把子类实例拿到父类的属性和方法,然后通过父类的原型赋值给子类,拿到父类原型上的属性和方法,这样就实现了继承了

这种方式还有缺点吗
c5 instanceof Child4 c5 instanceof Parent4 //true
如何区分一个对象由子类实例化,还是父类实例化的
这时候c5.constructor 指向了Parent4构造函数
为什么指向了parent4构造函数而不是指向Child4构造函数呢,因为上边有一句是
Child4.prototype = Parent4.prototype
这时候子类的原型指向了父类的原型,所以子类的实例当然是指向了父类构造函数了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99752.html

相关文章

  • 原型一:原型原型

    摘要:说白了,原型就是构造函数用来构造新实例的模板对象。什么是原型链先回答什么是原型。例如这个原型的原型就是这个构造函数的,既这个原型对象。这些原型对象通过像链子一样连起来,就叫做原型链。 原型链初步学习 这篇博客只是我初步理解原型链的一个个人学习笔记,写的比较粗略,且有的地方可能理解错误. 更多更专业的关于原型链的解释请看JavaScript深入之从原型到原型链和阮一峰的博客:Javas...

    MudOnTire 评论0 收藏0
  • 面试系列】之二:关于js原型

    摘要:之二关于原型开篇我记得初学时,最难懂的概念就是的原型,而且这个概念在笔试面试中常常提到,因此今天我们把这个概念拿出来,好好聊一聊。 之二:关于js原型 1. 开篇 我记得初学js时,最难懂的概念就是js的原型,而且这个概念在笔试面试中常常提到,因此今天我们把这个概念拿出来,好好聊一聊。 在仔细讲解之前,我们先来看一道题,这道题来自JavaScript高级程序设计中原型链那一节: fun...

    _ang 评论0 收藏0
  • "instanceof 的原理是什么"?大声告诉面试官,我知道!

    摘要:一是如何工作的在上是这样描述的运算符用于测试构造函数的属性是否出现在对象原型链中的任何位置换句话说,如果,那么必须是一个对象,而必须是一个合法的函数。下面我们举一个例子一步步来说明第一步每一个构造函数都有一个属性。 在 JavaScript 中,我们通常用 typeof 判断类型,但是在判断引用类型的值时,常常会遇到一个问题:无论引用的是什么类型的对象,都会返回 object(当然还有...

    CompileYouth 评论0 收藏0
  • 记录一次杭州顺网科技的面试过程

    摘要:以上是面试中笔试涉及到的知识点或者后面被问到的只是点。也许是根据薪资和面试的等级来出题的。我刚面试完回家,吃了一个泡面,回忆下面试题。同时作为传递到构造函数,执行了一次让构造函数里面的属性和方法赋值了一份给。 css 如何水平垂直居中,请尽量多说几种方法?很尴尬,我多次面试都被问到这个问题,fuck 定位(回答了)、table-cell布局、flex布局、translate+relat...

    shiguibiao 评论0 收藏0
  • 记录一次杭州顺网科技的面试过程

    摘要:以上是面试中笔试涉及到的知识点或者后面被问到的只是点。也许是根据薪资和面试的等级来出题的。我刚面试完回家,吃了一个泡面,回忆下面试题。同时作为传递到构造函数,执行了一次让构造函数里面的属性和方法赋值了一份给。 css 如何水平垂直居中,请尽量多说几种方法?很尴尬,我多次面试都被问到这个问题,fuck 定位(回答了)、table-cell布局、flex布局、translate+relat...

    caiyongji 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<