【JavaScript】面向对象之原型

Cristalven 发布于2019-08-26 12:14 / 2164人阅读

摘要：一原型概括原型是什么对象包含数学方法的函数，函数定义在属性，初始值为一个空对象原型的属性和方法不会影响函数自身的属性和方法类型的属性所有函数都具有的属性定义函数原型的默认值是空对象函数包含构造函数所有引用类型其实都是构造函数获取原型通过

JS(JavaScript)
一.原型
1.概括

原型是什么

Function对象包含数学方法的函数，函数定义在protoype属性，初始值为一个空对象
原型的属性和方法不会影响函数自身的属性和方法

// Function类型的属性 -> 所有函数都具有的属性
console.log(Function.prototype);
// 定义函数
function fn(){
    console.log("this is function");
}
// 原型的默认值是空对象
console.log(fn.prototype);
// 函数包含构造函数 -> 所有引用类型其实都是构造函数
console.log(Number.prototype);
console.log(Object.prototype);
var result = Object.getOwnPropertyDescriptor(Object.prototype, "constructor");
console.log(result);

获取原型

通过两种方式，来设置共存的属性和方法
构造函数的prototype属性
Object对象的getPrototype

function fn(){
    console.log("this is function");
}
// 使用访问对象的属性语法结构
console.log(fn.prototype);
console.log(fn["prototype"]);
// Object类型提供getPrototypeOf()方法
console.log(Object.getPrototypeOf(fn));

原型的属性和方法

通过一下两种方式
多带带定义原型的属性和方法
直接型定义个新对象

function fn(){
    console.log("this is function");
}
// 变量proto也是一个空对象
// var proto = fn.prototype;

// 新增属性或方法
// proto.name = "犬夜叉";
fn.prototype.name = "犬夜叉";
console.log(fn.prototype);
// defineProperty()
Object.defineProperty(fn.prototype, "age", {
    value : 18,
    enumerable : true
});
console.log(fn.prototype);

2.原型属性

自有属性与原型属性

自有属性；对象引用增加属性，独立的属性函数本身的属性
原型属性；通过新增属性和方法并定义原型的属性

// 定义构造函数
function Hero(name){
    // 构造函数本身的属性 -> 自有属性
    this.name = name;
    this.sayMe = function(){
        console.log("this is function");
    }
}
// 通过构造函数Hero的prototype新增属性或方法
// 通过原型所定义的属性 -> 原型属性
Hero.prototype.age = 18;
/*
    通过构造函数Hero创建对象时
    * 不仅具有构造函数的自有属性
    * 还具有构造函数的原型属性
 */
var hero = new Hero("犬夜叉");

console.log(hero.name);// 犬夜叉
console.log(hero.age);// 16

var hero2 = new Hero("桔梗");
console.log(hero2.name);// 桔梗
console.log(hero2.age);// 16
// 为对象hero新增age属性
// hero.age = 80;
// console.log(hero.age);// 80
//
// console.log(hero);
//
// console.log(hero2.age);// 16

Hero.prototype.age = 80;

console.log(hero.age);
console.log(hero2.age);

检测自有或原型属性

有两种方式以hasOwnPrototype()来检测对象是否指定自有属性
以in关键字检测对象及原型链是否有属性

function Hero(){
    // this.name = "犬夜叉";// 自有属性
}
// Hero.prototype.name = "桔梗";

var hero = new Hero();
/*
  Object.hasOwnProperty(prop)方法
  判断当前指定属性是否为自有属性
  
  prop - 表示指定属性名称
  返回值 - 布尔值
  true - 表示存在指定的自有属性
  false - 表示不存在指定的自有属性
 */
// console.log(hero.hasOwnProperty("name"));// true
/*
  使用in关键字检测对象的属性
  作用 - 判断对象中是否存在指定属性(自有属性或原型属性)
  返回值 - 布尔值
  true - 表示存在指定的属性
  false - 表示不存在指定的属性
 */
console.log("name" in hero);

扩展属性或方法

以原型设置指定构造函数和对象扩展其属性和方法

Object.prototype.sayMe = function () {
    console.log("you my sayMe function")
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));

重写原型属性

将构造函数和对象，以自有属性重写远得属性

//定义构造函数
function Hero() {
    this.name = "犬夜叉"
}
Hero.prototype.name = "桔梗";
//构造函数原型
var hero = new Hero();
// 构造函数创建对象
console.log(hero.name);//犬夜叉
//自有属性与原型属性同名，默认访问是自有属性，自有属性优先级别高于原型属性
delete hero.name;
//删除对象属性
console.log(hero.name);//桔梗
//重新访问对象属性

isPrototypeOF()方法

//通过初始化方式定义对象
var obj = {
    name : "犬夜叉"
}
function Hero() {}
//定义构造函数
Hero.prototype = obj;
//将对象obj赋值给构造函数Hero原型
var hero = new Hero();
//通过构造函数创建对象
var result = obj.isPrototypeOf(hero);
//判断指定对象是否是另一个对象原型
console.log(result);

3.扩展内建对象
内置对象的prototype属性设置扩展属性和方法

Object.prototype.sayMe = function () {
    console.log("you my sayMe function")
}
var obj = new Object();

obj.sayMe();

Array.prototype.inArray = function (color) {

    for(var i = 0, len = this.length; i < len; i++){
        if(this[i] === color){
            return true;
        }
    }
    return false;
}
var arr = ["red", "green","blue"];
console.log(arr.inArray("yellow"));
console.log(arr.inArray("red"));

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

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

SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
面向对象的JavaScript之继承(一) 类式继承

摘要：那你们肯定会问为什么共用，而没有共用呢，下面就给你解释，请看引用类型是共用的值类型是私用的。引言面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的. 继承的方式类式继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承 1.类式继承 //声明父...

forsigner 2019-08-20 14:21 评论0 收藏0
javascript面向对象之“多态”

摘要：之前，本质上不能算是一门面向对象的编程语言，因为它对于封装继承多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。所以在中出现了等关键字，解决了面向对象中出现了问题。 ES6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以...

JerryWangSAP 2019-08-23 14:11 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0