JavaScript 原型链总结（一）

已于 2022-03-15 09:43:55 修改
阅读量1.3k 收藏 2
点赞数
文章标签： javascript 前端 原型模式
于 2022-03-15 09:41:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36833171/article/details/123494437
版权

JS原型链（一）

文章目录

一、对象构造函数，原型对象，实例对象之间的关系

  1. 构造函数通过 protype属性 指向 原型对象

  2. 原型对象通过 constructor属性 指向 构造函数

  3. 原型对象通过 new 的形式 实例化 并 创建 实例对象

  4. 实例对象通过 proto 属性 指向 原型对象

function Person(nick, age) {
  this.nick = nick;
  this.age = age;
}
Person.prototype.sayName = function() {
  console.log(this.nick);
}
const zhangsan = new Person('张三', 20);
const lisi = new Person('李四', 21);
zhangsan.sayName(); // 张三
lisi.sayName(); // 李四
console.log(zhangsan.__proto__.sayName); // 张三
console.log(zhangsan.__proto__ === Person.prototype); // true
console.log(zhangsan.__proto__ === lisi.__proto__); // true
console.log(zhangsan.__proto__.constructor === Person); // true

二、原型链继承

  1. 对象属性继承
function Person(name, age) {
    this.name = name;
    this.age = age;
  }
Person.prototype.getName = function () {console.log(this.name)}
function Teacher(name, age, subject) {
	Person.call(this, name, age); // call会执行Person构造方法
  this.subject = subject;
}
var teacher = new Teacher('jack', 15, 'Math');
console.log(teacher.age);
console.log(teacher.name);
  1. 方法继承

Object.create(); 会创建一个无原型对象

Teacher.prototype = Object.create(Person.prototype);
console.log(Teacher.prototype.constructor); // [Function: Person]

三、常用API

  1. obj.__proto__ 等于Object.getPrototypeOf(obj)
  2. obj.__proto__.constructor用于获取构造函数
  3. __proto__是ES6标准，Object.getPrototypeOf(obj)是老标准，用于获取对象实例的原型。
function User(name, age) {
  this.name = name;
  this.age = age;
}
function createByObject(obj, ...args) {
  // const constructor = Object.getPrototypeOf(obj).constructor;
  const constructor = obj.__proto__.constructor;
  return new constructor(...args);
}
let hd = new User("后盾人");
let xj = createByObject(hd, "向军", 12);
console.log(xj);

四、常见问题

一、什么是原型与原型链

  • 原型

在javascript中，函数可以有属性。每个函数都有-一个特殊的属性叫作原型(prototype)。

  • 原型链

原型链就是当我们访问对象的某个属性或方法时，如果在当前对象中找不到定义，会继续在当前对象的原型对象中查找，如果原型对象中依然没有找到，会继续在原型对象的原型中查找(原型也是对象，也有它自己的原型)如此继续，直到找到为止，或者查找到最顶层的原型对象中也没有找到，就结束查找，返回undefined。可以看出，这个查找过程是一个链式的查找，每个对象都有一个到它自身原型对象的链接，这些链接组件的整个链条就是原型链。

二、原型和原型链存在的意义是什么?

使得实例对象可以共享构造函数原型属性和方法,节省内存。构造函数原型上的属性和方法越多，节省内存越大.

补充

一、in与hasOwnProperty属性检测差异

  • in会攀升原型链检测，hasOwnProperty只会检测实例对象本身
let a = { url: 'houdunre' };
let b = { name: '后盾人' };
Object.prototype.web = '后盾人';
'web' in a; // true
'name' in a; // false
Object.setPrototypeOf(a, b);
console.log(a.__proto__); // { name: '后盾人' }
'name' in a; // true
a.hasOwnProperty('name'); // false


for(const key in a ){
  // 只遍历实例对象的属性
  if(a.hasOwnProperty(key)) {
    const element = object[key];
  }
}

二、isPrototypeOf 原型链检测

let a = {}; let b = {};
Object.setPrototypeOf(a,b); // b是a的爹
console.log(b.isPrototypeOf(a)); // true

三、DOM节点借用Array原型方法

<script>
    let arr = [1, 3, 43];
    let res = arr.filter(item => {
      return item > 39;
    });
    console.log(res);
    let btns = document.querySelectorAll('button');
    btns = Array.prototype.filter.call(btns, item => {
      return item.hasAttribute('class');
    });
    console.log(btns[0].innerHTML);
</script>

四、合理的构造函数声明

问题：不合理的构造函数
function User(name) {
  this.name = name;
  this.show = function() {
    console.log(this.name);
  }
}

bj63CR.png

可以看到，这样创建的函数会被绑定到每个实例对象上，会浪费内存空间。

合理的做法：将共享方法绑定到prototype上
function User(name) {
  this.name = name;
}

User.prototype.show = function() {
  console.log(this.name);
}
如果构造函数需要定义的方法较多，可以将原型声明为一个对象
function User(name) {
  this.name = name;
}

User.prototype = {
  constructor: User, // 记得绑定构造函数
  show() {
    console.log(this.name);
  },
  get() {
    console.log(this.name);
  }
}

五、__proto__

1. Object.setPrototypeOf与Object.setPrototypeOf

由于__proto__是ES6标准，ES5可以使用Object提供的Object.setPrototypeOf代替__proto__= xxx

let hd = { name: '后盾人' }
let user = { show: function() {return this.name} }
Object.setPrototypeOf(hd, user); // 代替__proto__ = xxx
// hd.__proto__ = user;
console.log(Object.getPrototypeOf(hd)); // 代替__proto__
// console.log(hd.__proto__);
2. __proto__不是一个属性
let hd = { name: '后盾热' };
hd.__proto__ = {
  show() {
    console.log(this.name);
  }
};
hd.__proto__ = 10;
// { show: [Function: show] }
console.log(hd.__proto__);

可以看到直接对__proto__赋值是无效的，__proto__是一个具备getter和setter的访问器。

自定义实现proto

let obj = {proto: {},}
Object.defineProperty(obj, 'proto', {
  get() {
    return proto;
  },
  set(obj) {
    console.log('set proto');
    if(obj instanceof Object) {
      proto = obj;
    }
  }
})
let a = {name: '张三'};
let b = {
  show: function() {
    console.log(this.name);
  }
};
Object.setPrototypeOf(a, obj);
a.proto = b;
a.proto.show.call(a, null);

六、！！！原型链可以实现JS继承与多态

1. JS继承的本质是原型链的继承
function Entity() {};
Entity.prototype = {
  constructor: Entity,
  name: 'Entity',
  id: Math.floor(Math.random()*10)
}
function Person() {}
Person.prototype.nickName = '昵称';
Person.prototype.__proto__ = Entity.prototype;

const p1 = new Person();
console.log(p1.nickName);
2. Object.create实现继承
function User() {}
User.prototype.show = function() {
  console.log('user.show()');
}
function Admin() {}
Admin.prototype = Object.create(User.prototype);
// Admin.prototype.constructor = Admin;

let a = new Admin();
console.log(a.constructor); // User

function User() {}
User.prototype.name = function() {
  console.log('user.name()');
}
function Admin() {}
Admin.prototype = Object.create(User.prototype);
// 这样可以避免for in循环去遍历原型链的问题
Object.defineProperty(Admin.prototype, 'constructor', {
  value: Admin,
  enumerable: false
})
Admin.prototype.role = function() {
  console.log('admin.role');
}
console.log(
  Object.getOwnPropertyDescriptors(Admin.prototype)
);
let a = new Admin();
3. 原型链实现方法重写
function User() {}
User.prototype.show = function() {
  console.log('user.show()');
}
function Admin() {}
Admin.prototype = Object.create(User.prototype);
Admin.prototype.constructor = Admin;
Admin.prototype.show = function () {
  console.log('admin.show()');
}

let hd = new Admin();
hd.show();
4. 对象的多态
function User() {}
User.prototype.description = 'User';
User.prototype.show = function() {
  console.log(this.description());
}

function Admin() {}
Admin.prototype = Object.create(User.prototype);
Admin.prototype.construction = Admin;
Admin.prototype.description = function() {return '管理员'}

function Member() {}
Member.prototype = Object.create(User.prototype);
Member.prototype.construction = Member;
Member.prototype.description = function() {return '成员'}

function Enterprise() {}
Enterprise.prototype = Object.create(User.prototype);
Enterprise.prototype.construction = Enterprise;
Enterprise.prototype.description = function() {return '企业用户'}

for (const obj of [new Admin(), new Member(), new Enterprise()]) {
  obj.show();
}
5. 在子类中使用父类构造方法
function User(name, age) {
  this.name = name;
  this.age = age;
}

User.prototype.show = function() {
  console.log(this.name, this.age);
};

function Admin(name, age) {
  User.call(this, name, age);
}

Admin.prototype = Object.create(User.prototype);
let admin = new Admin('管理员', 18);
admin.show();

利用apply方法可以简化子类构造方法的调用

function User(name, age) {
  this.name = name;
  this.age = age;
}

User.prototype.show = function() {
  console.log(this.name, this.age);
};

function Admin(...args) {
  User.apply(this, args);
}

Admin.prototype = Object.create(User.prototype);
let admin = new Admin('管理员', 18);
admin.show();
6. 使用原型工厂封装继承
function User() {}
function Admin() {}
function extend(sub, sup) {
  sub.prototype = Object.create(sup.prototype);
  Object.defineProperty(sub.prototype, 'constructor', {
    value: sub,
    enumerable: false
  });
}
extend(Admin, User);
User.prototype.name = function() {
  console.log('user.name');
}
Admin.prototype.role = function() {
  console.log('admin.role');
}
let a = new Admin();
a.role();
a.name();
清紫悠悠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript原型链与继承操作实例总结
10-18
主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
JavaScript原型链(重要)
抗争小青年的博客
07-24 1987
什么是原型链，什么是原型对象，什么是对象原型！ 利用funcation关键字定义函数，也叫命名函数//定义，利用funcation命名函数functionfn(){}fn()利用字面量定义函数，也叫匿名函数//2.字面量定义匿名函数varfn1=function(){}fn1()由于声明函数方式的不同以及预解析的因素，导致1，2两种方式略微不同。...
JavaScript关于原型链的总结
zyugat的博客
08-04 214
JavaScript关于原型链的总结JavaScript关于原型链的总结一、原型属性二、原型链三、instanceof原型链的总结 JavaScript关于原型链的总结 一、原型属性 函数的prototype属性 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象) 原型对象中有一个属性constructor, 它指向函数对象 给原型对象添加属性(一般都是方法) 作用: 函数的所有实例对象自动拥有原型中的属性(方法) 当在创建每一个函数时，解析器
JavaScript中的原型和原型链
yigetutouzai的博客
07-08 374
JS中的原型和原型链应该算是比较经典的话题了，很多人只了解了其表面（在创建构造函数的时候使用prototype属性声明公共方法），但是在面试中也会经常问到其中的原理，这时候就答不出来了(比如我)...
JavaScript-原型链理解总结
ZhanShenvsDiHuang的博客
04-21 1104
JavaScript-原型链理解总结（自己用）
JavaScript 原型链学习总结
10-28
在JavaScript中，一切都是对像，函数是第一型
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
10-18
主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下
javascript中对象的定义、使用以及对象和原型链操作小结
10-20
主要介绍了javascript中对象的定义、使用以及对象和原型链操作,结合实例形式总结分析了javascript对象操作的常用技巧,需要的朋友可以参考下
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 630
步骤很详细，直接上教程……
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 21
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 855
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1200
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 204
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 143
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 390
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1448
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
redux快速入门
qq_73270720的博客
04-29 247
简单的加减案例,学会redux快速入门
Vue.js中Object.defineProperty实现数据劫持、数据代理和计算属性
javaThinker的专栏
04-26 311
在Vue.js中，数据劫持、数据代理和计算属性都是重要的概念，它们都与这个方法密切相关。下面我会逐一解释它们的原理，并给出相应的代码示例。
JavaScript 原型链
08-28
总结来说，JavaScript原型链是一种用于实现继承和属性查找的机制。它通过将对象的原型与其构造函数的原型对象关联起来，从而实现属性继承和共享方法的定义。原型链是JavaScript中面向对象编程的基础之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值