js面向对象(工厂模式、构造函数模式、原型模式、原型和原型链)

1.封装

2. 工厂模式

        function createCar(color, style){let obj = new Object();obj.color = color;obj.style = style;return obj;}var car1 = createCar("red","car1");var car2 = createCar("green","car2");

3. 构造函数模式

// 创建出来的对象和构造函数有紧密关联function CreateCar(color, style){this.color = color;this.style = style;}var car1 = new CreateCar("red","car1");var car2 = new CreateCar("green","car2");console.log(car1,car2);

4. 原型模式

5.构造函数模式

构造函数与工厂模式的区别(显示)

1. 没有显示的创建对象

2. 直接将属性和方法赋值给了this对象

3. 没有return语句

6.构造函数创建对象内部的处理

1. 创建一个新对象

2. 将构造函数的作用域赋给新对象

3. 执行构造函数中的代码

4. 返回新对象

7.面试题:如何区分数组和对象?为什么instanceof能区分数组和对象?

 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值。

如下,可以通过car1 instanceof CreateCar检验,CreateCar构造函数的prototype是否出现在对象car1的原型链中的任何位置 

// 创建出来的对象和构造函数有紧密关联function CreateCar(color, style){this.color = color;this.style = style;}var car1 = new CreateCar("red","car1");var car2 = new CreateCar("green","car2");let arr =  [1,2,3];let obj = {a:1};console.log(arr instanceof Array);// trueconsole.log(obj instanceof Object);// trueconsole.log(car1 instanceof CreateCar);//true instance可以判断实例是否

通过对象的constructor属性判断是否和构造函数相等

obj.constructor === Object

8.原型模式

构造函数通过prototype访问原型

实例通过__proto__访问原型

为什么obj.constructor === fn(构造函数)?因为原型上包括constructor属性,这个属性本质指向构造函数

        function CreateCarA(color, style) {this.color = color;this.style = style;}function CreateCarB(circle, num) {this.circle = circle;this.num = num;}CreateCarA.prototype.config = "顶配";CreateCarB.prototype = CreateCarA.prototype;var car1 = new CreateCarA("red", "car1");var car2 = new CreateCarB(true, 3);console.log(car1,car2);

 

9.原型

原型,实例,构造函数的关系:

  • 构造函数通过new 的形式创建实例对象;
  • 实例对象通过__proto__指向原型对象;
  • __proto__在实例的原型对象上
  • 构造函数通过prototype得到原型对象;
  • 原型对象上有constructor方法,原型对象通过constructor得到构造函数(原型对象的constructor指向构造函数);

        function Fn(name, age) {this.name = name;this.age = age;}// 通过 new Fn()指向实例var fn = new Fn("lmf", 22);console.log(fn);// 实例通过__proto指向原型对象,构造函数通过Fn.prototype指向原型对象console.log(fn.__proto__ === Fn.prototype);//true// 原型通过f1.constructor方式指向构造函数var f1 = Fn.prototype;console.log(f1.constructor === Fn);// Fn.address的形式是给构造函数添加静态属性,这种通过new Fn()是不能将其设置到实例对象上的Fn.address = "深圳";var fn2 = new Fn("lmf", 23);console.log(fn2);

 

 10.原型链

构造函数的prototype指向原型,原型通过constructor方法访问到构造函数;
构造函数通过new关键字创建实例;实例通过constructor可以访问到构造函数;
实例通过__proto__访问到原型
原型链决定了对象属性的访问方式
       var fn = new Fn("lmf", 22);var fn1 =  Fn.prototype;console.log(fn.constructor === Fn.prototype.constructor);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/138502.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux虚拟机静态IP设置

1.环境配置 首先要准备好两台centos虚拟机,在高级篇部分可能有数据库主从复制,所以暂时先开两台虚拟机。 两台虚拟机需要更改: mac地址主机名ip地址UUID 1.更改主机名 更改虚拟机的主机名 vim /etc/hostname2.更改静态ip地址 /etc/sysc…

CSS悬停卡片翻转明信片效果源码附注释

运行效果演示: HTML页面代码: <!DOCTYPE html> <html lang="en" > <head>

HTX 与 Zebec Protocol 展开深度合作,并将以质押者的身份参与 ZBC Staking

自 2023 年下半年以来&#xff0c;加密市场始终处于低迷的状态&#xff0c;在刚刚结束的 9 月&#xff0c;加密行业总融资额创下 2021 年以来的新低&#xff0c;同时在 DeFi 领域 DEX 交易额为 318.9 亿美元&#xff0c;同样创下 2021 年 1 月以来的新低。 对于投资者而言&…

从旅游发展大会,看长沙的“落子”与“棋道”

文&#xff5c;新熔财经 作者&#xff5c;石榴 中秋国庆假期作为今年的最后一个小长假&#xff0c;全国各地果断祭出自己的“杀手锏”&#xff0c;不过&#xff0c;虽是百花齐放&#xff0c;但星城长沙仍然是最亮眼的存在之一。 全省文化旅游统计监测系统显示&#xff0c;中…

LeetCode 300. 最长递增子序列

最长递增子序列 题目链接: 300. 最长递增子序列 题目描述: 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3…

Java 反射

目录 反射机制&#x1f6a9;一个需求引出反射&快速入门反射机制反射的扩展-反射相关类反射的优点和缺点反射调用时会造成性能的一些降低->反射调用性能优化&#xff08;虽然优化程度不高&#xff0c;但是也是可以起到适当的优化的作用&#xff09; Class类&#x1f6a9;…

grafana api创建dashboard 记录

文章目录 json model导入申请api key创建dashboard删除dashboard json model导入 直接在ui通过json model 导入&#xff0c;开发自己用还好&#xff0c;但对非开发人员不太友好&#xff0c;故考虑通过api后台自动创建 api doc : https://grafana.com/docs/grafana/v9.3/devel…

提升销售和转化率:销售助理机器人的关键优势

在当今竞争激烈的市场中&#xff0c;企业需要不断寻求创新的方式来提升销售和转化率。销售助理机器人的出现&#xff0c;为企业带来了新的机遇。接下来就探讨一下&#xff0c;销售助理机器人在提升销售和转化率方面有什么优势&#xff0c;以及有什么销售助理机器人可以采用以帮…

PFA洗气瓶常用规格指南及实验注意事项

一、指南 PFA洗气瓶是一种洗去气体中杂质的器皿&#xff0c;是将不纯气体通过选定的适宜液体介质鼓泡吸收&#xff0c;从而洗去杂质气体&#xff0c;以达净化气体的目的。在设计时&#xff0c;四氟球的周围都布满小孔&#xff0c;加工工艺独特。一般情况下&#xff0c;长导管进…

面试题:如何测试App性能?

为什么要做App性能测试&#xff1f; 如果APP总是出现卡顿或网络延迟的情况&#xff0c;降低了用户的好感&#xff0c;用户可能会抛弃该App&#xff0c;换同类型的其他应用。如果APP的性能较好&#xff0c;用户体验高&#xff0c;使用起来丝滑顺畅&#xff0c;那该应用的用户粘…

基于水基湍流优化的BP神经网络(分类应用) - 附代码

基于水基湍流优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于水基湍流优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.水基湍流优化BP神经网络3.1 BP神经网络参数设置3.2 水基湍流算法应用 4.测试结果…

UR构型的奇异点

关节5与关节4平行时&#xff0c;发生腕部奇异关节234共面时&#xff0c;发生肘部奇异关节56交点在关节12轴线组成的平面内时&#xff0c;发生肩部奇异 下面这段视频说明了UR构型机器人奇点的三种类型。 参考链接&#xff1a; https://www.mecademic.com/academic_articles/si…