IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 深入学习JS — 原型、原型链、typeof和instanceof的理解 -> 正文阅读

[JavaScript知识库]深入学习JS — 原型、原型链、typeof和instanceof的理解

一、概念

1、所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外)。也就是说,可以使用Obj.prototype={}来添加新的属性。
2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象)
3、所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象)
4、所有引用类型,它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。
5、当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,
那么就会去它的’_ _ proto_ _'属性(也就是它的构造函数的’prototype’属性)中去寻找。

二、原型

原型的英文:prototype

function Person(name) {
 this.name = name;
}
Person.prototype = {
 sayHi: function () {
     console.log('Hi , my name is ' + this.name + '!');
 }
}
var yancy = new Person('yancy');

console.log('yancy.__proto__: ',yancy.__proto__);
console.log('Person.prototype: ',Person.prototype);
yancy.sayHi();

在这里插入图片描述

其实[[prototype]]和__proto__意义相同,均表示对象的内部属性,其值指向对象原型。前者在一些书籍、规范中表示一个对象的原型属性,后者则是在浏览器实现中指向对象原型。

如图,yancy对象并没有syaHi方法属性,但是我们给它的构造函数Person添加了sayHi属性,所以它可以直接调用sayHi()。这个sayHi属性是在它的__proto__属性里找到的,更准确的说,是__proto__所指向的Person构造函数的prototype对象属性中定义的sayHi属性,也就是原型中的属性。

为什么要使用原型呢?

不使用原型,只需要在构造函数Person中,直接定义sayHi属性。yancy一样可以直接调用。但是,这样是存在缺陷的,如果我利用Person构造了许多实例对象,那么每个实例对象中都包含了sayHi属性,看似并没有什么不妥。然而,既然这些实例对象中的sayHi属性都是一模一样的,为什么不提取出来呢?
于是js引入了原型的概念。

三、原型链

当前对象调用属性,发现自己没有,便去__proto__也就是构造函数的prototype属性中去找,如果构造函数的prototype属性中没有找到,那么就会去构造函数的prorotype属性(也是对象)的__proto__中(也就是其构造函数的protype属性中找),依次类推,指导找到了Object的__proto__(为null),如果依旧没找到,那么就没有该属性。

在这里插入图片描述
如图:
(1)、如果yancy.sayHi(),则会在Person.prototype中找到sayHi属性并调用。
(2)、如果yancy.toString(),则会在Object.prototype中找到toString属性并调用。

四、typeof和instanceof

(1)、typeof

typeof运算符用于判断对象的类型。
基本用法为 typeof obj
 var number = 1;
 var str = 'Hello World!';
 var array = [];
 var yancy = {
     name : 'yancy',
     age: 20
 }
 console.log(typeof number);
 console.log(typeof str);
 console.log('typeof array: ',typeof array);
 console.log('typeof yancy: ',typeof yancy);

在这里插入图片描述

可以看到,对于数组和对象,typeof的判定结果都为object。
所以不能使用typeof来判断对象是不是数组,那么就需要用到下面的instanceof了。

(2)、instanceof

instanceof相比与typeof来说,instanceof方法要求开发者明确的确认对象为某特定类型。
即instanceof用于判断引用类型属于哪个构造函数的方法。
更重要的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。
var array = [];
console.log('array instanceof Array: ',array instanceof Array);
console.log('array instanceof Object: ',array instanceof Object);

在这里插入图片描述
判断实例对象是否在函数的原型链上:

function Person(name) {
    this.name = name;
}
Person.prototype = {
    sayHi: function () {
        console.log('Hi , my name is ' + this.name + '!');
    }
}
var yancy = new Person('yancy');

在这里插入图片描述
可以看到yancy对象是在构造函数Person原型链上的。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-15 22:23:40  更:2022-03-15 22:23:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 6:37:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码