原型和继承

vvpale 发布于2019-08-26 12:13 / 3341人阅读

摘要：原型在中函数是一个包含属性和方法的类型的对象原型就是类型对象的一个属性每个函数都有一个属性它默认指向一个空对象即原型对象原型对象中有一个属性它指向函数对象原型是用于保存对象的共享属性和方法的原型的属性和方法并不会影响函数本身的属性和方

原型

在JS中函数是一个包含属性和方法的Function类型的对象原型prototype就是Function类型对象的一个属性
每个函数都有一个prototype属性, 它默认指向一个Object空对象---即:原型对象
原型对象中有一个属性constructor, 它指向函数对象
原型是用于保存对象的共享属性和方法的原型的属性和方法并不会影响函数本身的属性和方法

 function fn(){
 return "hello"
}
console.log(typeof fn.prototype)   //object

获取原型

通过构造函数的prototype属性

  function fn(){
   console.log("this is a function")
}
  console.log(fn.prototype);   //{constructor: ƒ}

通过Object对象的getgetPrototypeOf()方法

function fn(){
console.log("this is a function")
}
console.log(Object.getPrototypeOf(fn));   //ƒ () { [native code] }

原型的属性和方法

原型的属性和方法多带带进行定义

  构造函数.prototype.属性名 = 属性值
  构造函数.prototype.方法名 = function(){
}

直接为原型定义一个新对象

  构造函数.prototype = {
  属性名:属性值,
  方法:function(){}
}

自有属性与原型属性

自有属性:通过对象的引用添加的属性
原型属性:从原型对象中继承而来如果原型对象中属性值改变则所有继承
自该原型的对象属性都改变

 function Person(name){
 //构造函数本身的属性 --> 自有属性
 this.name = name;
}
//通过构造函数Person的prototype新增属性 --> 原型属性
 Person.prototype.age=29
 var man=new Person("林更新");
 console.log(man.name);  //林更新
 console.log(man.age)    //29

 var woman=new Person("宋佳");
 woman.age=38;
 console.log(woman.name) //宋佳
 console.log(woman.age)  //38
 Person.prototype.age=18;
 console.log(man.age)  //18
 console.log(woman.age)   //38

检测自有原型属性

使用hasOwnProperty()方法检测对象是否具有指定的自有属性

  function Person() {

    }
    var man =new Person()
    console.log(man.hasOwnProperty("name"))   //false

使用in关键字检测对象及其原型链中是否具有指定属性

    function Person() {

    }
    var man =new Person()
    console.log("name" in man)    //false

显示原型对象和隐式原型对象

每个函数function都有一个prototype，即显式原型

每个实例对象都有一个__proto__，可称为隐式原型

对象的隐式原型的值为其对应构造函数的显式原型的值

函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象

对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值

我们能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

function Person() {
    this.name="MasterYi"
}
Person.prototype.age=100;
var man=new Person;
console.log(man.prototype); // undefined 表示对象中不存在该属性
console.log(man.__proto__); // {age: 100, constructor: ƒ}

原型链

访问一个对象的属性时，先在自身属性中查找，找到返回

如果没有, 再沿着__proto__这条链向上查找, 找到返回

如果最终没找到, 返回undefined

__proto__这条原型查找链就是原型链: 隐式原型链

读取对象的属性值时: 会自动到原型链中查找

设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值

方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

作用:用来查找对象的属性(方法)

GPU云服务器云服务器原型继承原型链继承 js原型链的继承 java反射和继承

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

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

JavaScript面向对象---原型链继承

摘要：因为这造成了继承链的紊乱，因为的实例是由构造函数创建的，现在其属性却指向了为了避免这一现象，就必须在替换对象之后，为新的对象加上属性，使其指向原来的构造函数。这个函数接收两个参数子类型构造函数和超类型构造函数。最近一直在研究js面向对象，原型链继承是一个难点，下面是我对继承的理解以下文章借鉴自CSDN季诗筱的博客原型链继承的基本概念： ES中描述了原型链的概念，并将原型链作为实现...

vspiders 2019-08-20 13:33 评论0 收藏0
JavaScript继承理解：ES5继承方式+ES6Class继承对比

摘要：寄生组合式继承的继承方式有多种主要有原型链继承借用构造函数组合式继承寄生式继承和寄生组合式继承。中利用定义类，实现类的继承子类里调用父类构造函数实现实例属性和方法的继承子类原型继承父类原型，实现原型对象上方法的继承。 JavaScript中实现继承在JavaScript中实现继承主要实现以下两方面的属性和方法的继承，这两方面相互互补，既有共享的属性和方法，又有特有的属性和方法。 ...

liaoyg8023 2019-08-26 12:09 评论0 收藏0
JavaScript 的继承方式及优缺点

摘要：继承简介在的中的面向对象编程，继承是给构造函数之间建立关系非常重要的方式，根据原型链的特点，其实继承就是更改原本默认的原型链，形成新的原型链的过程。 showImg(https://segmentfault.com/img/remote/1460000018998684); 阅读原文前言 JavaScript 原本不是纯粹的 OOP 语言，因为在 ES5 规范中没有类的概念，在 ...

nanchen2251 2019-08-23 12:18 评论0 收藏0
js原型和继承

摘要：举例说明组合继承组合继承利用原型链借用构造函数的模式解决了原型链继承和类式继承的问题。示例组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。对js原型和继承的理解一直处于不懂-懂-不懂-懂-不懂。。。的无限循环之中，本来打算只是简单总结下js继承方式，可看了些网上的资料后，发现又不懂继承了。。。这篇文章只...

Hujiawei 2019-08-21 13:49 评论0 收藏0
js继承的理解

摘要：创建自定义的构造函数之后，其原型对象只会取得属性，其他方法都是从继承来的。优缺点寄生式继承在主要考虑对象而不是创建自定义类型和构造函数时，是十分有用的。原文链接：https://kongchenglc.coding.me... 1.原型链 js的继承机制不同于传统的面向对象语言，采用原型链实现继承，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。理解原型链必须先理...

BlackFlagBin 2019-08-20 16:34 评论0 收藏0
JavaScript继承方式详解

摘要：可以通过构造函数和原型的方式模拟实现类的功能。原型式继承与类式继承类式继承是在子类型构造函数的内部调用超类型的构造函数。寄生式继承这种继承方式是把原型式工厂模式结合起来，目的是为了封装创建的过程。 js继承的概念 js里常用的如下两种继承方式：原型链继承（对象间的继承）类式继承（构造函数间的继承）由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。...

Yangyang 2019-08-21 10:23 评论0 收藏0