JavaScript-原型

Vixb 发布于2019-08-26 12:13 / 3446人阅读

摘要：不要为继承关系多带带创建新对象尽量减少运行时的方法搜索将自身属性改为原型属性原型链的问题原型链实际上是多个构造函数或者对象之间共享属性和方法创建子级的对象时，不能像父级的构造函数传递任何参数实际开发中，很少多带带使用原型链。

原型概述 原型是什么

在JavaScript中，函数是一个包含属性和方法的Function类型的对象原型（Prototype）是Function类型对象的一个属性。
在函数定义时就包含了Prototype属性，它的初始值是一个空对象。在JavaScript中并没有定义函数的原型类型，所以原型是任何类型的。
原型用于保存对象的共享属性和方法，原型的属性和方法并不会影响函数本身的属性和方法。

获取原型

//通过构造函数的Prototype属性获取原型
function fun() {
    console.log("this is function");
};
console.log(fun.prototype);//fun｛｝
console.log(fun["prototype"]);//fun｛｝

//通过Object对象的getPortotypeOf(函数名)方法
console.log(Object.getPrototypeOf(fun));//[Function]

原型的属性和方法

function fun() {
    console.log("this is function")
}
/*  设置属性的原型和方法
     函数名.prototype.属性名 = 属性值
     函数名.prototype.方法名 = function()｛｝*/
fun.prototype.name = "花间集";
console.log(fun.prototype.name)//花间集

原型属性 自有属性和原型属性

自有属性：通过对象的引用添加的属性。其他对象无此属性，即使有，也是不彼此立的属性

原型属性：从原型对象中继承来的属性，一旦原型对象属性值改变，所有继承该原型的对象属性都改变

//定义构造函数
function fun(agg) {
    //构造函数本身的属性或方法-自有属性
    this.agg = agg;
    this.age = function () {
        console.log(100)
    }
}
//通过原型新增的属性或方法-原型属性
fun.prototype.name = "白";

/*  通过构造函数创建对象
*    *不仅有构造函数的自有属性
*    *好友构造函数的原型属性*/
var fn = new fun(1);
console.log(fn.name);//白
console.log(fn.agg);//1

检测原型属性

function fun() {
    this.name = "花间集"//自有属性
}
//原型属性
fun.prototype.name = "温庭筠";
//通过构造函数创建对象
var fn = new fun();

/*   Object.hasOwnPrototy(属性名称)方法
*     返回值-布尔值
*      true-表示存在指定的自有属性
*      false-表示不存在指定的自有属性*/
console.log(fun.hasOwnProperty("name"))//true

/*   使用in关键字检测对象的属性
*     判断对象中是否存在是定属性（自有属性或原型属性）
*     返回值-布尔值*/
console.log("name" in fun);//true

重写与删除原型属性

//创建构造函数
function fun() {
    this.name = "村上春树"
}
//新增与自有属性同名的原型属性
fun.prototype.name = "西尾维新";

//用构造函数创建对象
var fn = new fun();

//当自有属性和原型属性同名时，自有属性的级别高于原型属性
console.log(fn.name);//村上春树

//删除对象的属性，自有属性和原型属性同名，先删除自有属性。
//再删除一次则删除原型属性
delete fn.name;

//重新访问对象的属性
console.log(fn.name);//西尾维新

isPrototypeOf()方法

该方法用来判断对象是否是另一个对象的原型

//通过初始化器方式定义对象
var obj ={
    name : "花间集"
};
//定义构造函数
function Fun () {
    this.agg = 2
}
//将对象obj赋值于函数Fun的原型
Fun.prototype=obj;
//用构造函数创建对象
var fn = new Fun();
//判断对象obj是不是对象fn的原型
var f = obj.isPrototypeOf(fn);
console.log(f);//true

扩展内建对象

JavaScript中的内置对象有些也具有Prototype属性，利用内置对象的prototype属性可以为内置对象扩展属性或者方法。
一般建议慎用这种方式，可能会应浏览器版本问题导致冲突。

继承 原型链

/*    原型链
*   类似于子级可以直接使用父级的属性或者方法
*   构造函数或者对象的原型一级一级的指向Object的原型
*   后面的可以直接使用前面的原型定义->实现继承*/
function A () {
    this.a = "a"
}
var a = new A();//通过构造函数创建对象

function B () {
    this.b = "b"
}
//B函数的原型指向对象a
B.prototype=a;
//构造函数创建对象
var b = new B();
console.log(b.a);//a
console.log(b.b);//b

function C () {
    this.c = "c"
}
//C函数的原型指向b对象
C.prototype=b;
//创建构造函数
var c = new C();

console.log(c.a);//a
console.log(c.b);//b
console.log(c.c);//c

只继承于原型的原型链

出于对效率的考虑，尽可能的降属性和方法添加到原型上。

不要为继承关系多带带创建新对象

尽量减少运行时的方法搜索

function A () {
    //将自身属性改为原型属性
}
A.prototype.a="a";

function B () {

}
B.prototype = A.prototype;

B.prototype.b="b";
var b = new B();
console.log(b.a);//a
console.log(b.b);//b

function C () {
     this.c="c"
}

C.prototype = B.prototype;
var c = new C();
console.log(c.a);//a
console.log(c.b);//b
console.log(c.c);//c

原型链的问题

原型链实际上是多个构造函数或者对象之间共享属性和方法

创建子级的对象时，不能像父级的构造函数传递任何参数

实际开发中，很少多带带使用原型链。

GPU云服务器云服务器 javascript原型原型原型链基于原型原型方法

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

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

理解JavaScript的核心知识点：原型

摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

iKcamp 2019-08-23 18:34 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
深入理解Javascript原型关系

摘要：如下所示在规范中，已经正式把属性添加到规范中也可以通过设置和获取对象的原型对象对象之间的关系可以用下图来表示但规范主要介绍了如何利用构造函数去构建原型关系。前言在软件工程中，代码重用的模式极为重要，因为他们可以显著地减少软件开发的成本。在那些主流的基于类的语言（比如Java,C++）中都是通过继承(extend)来实现代码复用，同时类继承引入了一套类型规范。而JavaScript是...

ethernet 2019-08-22 14:06 评论0 收藏0
JavaScript基础之创建对象、原型、原型对象、原型链

摘要：在最开始的时候，原型对象的设计主要是为了获取对象的构造函数。同理数组通过调用函数通过调用原型链中描述了原型链的概念，并将原型链作为实现继承的主要方法。对象的创建在JavaScript中创建一个对象有三种方式。可以通过对象直接量、关键字new和Object.create()函数来创建对象。 1. 对象直接量创建对象最直接的方式就是在JavaScript代码中使用对象直接量。在ES5...

wangbjun 2019-08-22 15:16 评论0 收藏0
细说 Javascript 对象篇（二） : 原型对象

摘要：并没有类继承模型，而是使用原型对象进行原型式继承。我们举例说明原型链查找机制当访问一个对象的属性时，会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。原始类型有以下五种型。此外，试图查找一个不存在属性时将会遍历整个原型链。 Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。尽管人们经常将此看做是 Javascript 的一个缺点，然...

lansheng228 2019-08-19 14:40 评论0 收藏0