构造函数和原型和原型链

构造函数和原型

面向对象

面向过程

概念:根据流程,一步步实现特定的功能,亲力亲为。‘小兵思维’

面向过程是一种以过程为中心的编程思想。这些都是以什么正在发生为主要目标进行编程,不同于面向对象的是谁在受影响。与面向对象明显的不同就是封装、继承、类。简写为POP

好处:对于流程步骤非常清晰

缺点:不适合大型项目

面向对象

概念:从全局出发,将功能拆分到一个个的对象中,通过调用对象的方法实现。‘指挥家思维’

面向对象的方法主要是把事物给对象化,包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象(万物皆对象)。

好处:适合大型项目

缺点:对于流程步骤不够清晰

构造函数

概念

JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。

构造函数就是你构造出来的函数,是一种特殊的方法,与普通函数有着质的区别。

构造函数例如工厂流水线,实例对象例如需要加工的产品

作用

批量创建具有相同属性和方法的实例对象

语法:

function 函数名(形参1,形参2...) {
    this.属性1 =1
    this.属性2 =2
    ...
    this.属性n = 值n
}

调用:

let p1 = new 函数名(实参1, 实参2)

注意:

  1. 构造函数的首字母需要大写
  2. 函数体内部需要用this赋值
  3. 需要通过new关键字来调用该构造函数
  4. 构造函数不需要return返回值

构造函数的this指向: 指向构造函数的实例对象

new关键字在实例化过程中所起的作用:

  	1. 创建一个空对象
  	2. 将this指向这个空对象
  	3. 指向函数体里面的代码
  	4. 将具有内容的新对象赋值给实例对象

JS 中构造函数和普通函数的区别

  1. 构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写

  2. 调用方式同

    普通函数的调用方式:直接调用 person()

    构造函数的调用方式:需要使用new关键字来调用 new Person()

  3. 构造函数的函数名与类名相同:Person( ) 这个构造函数,Person 既是函数名,也是这个对象的类名

  4. 构造函数,不需要返回值;普通函数,因为没有返回值,所以是undefined

类和实例对象的关系

类:具有相同特征(属性和方法)的物体的集合

对象: 特定某一个物体

类和对象的关系:基本上所有的对象都是由类实例化出来的

js的中的类(构造函数):Array, Object, RegExp, Date, String, Number, Boolean

方法过载

直接挂载到构造函数内部的方法,当实例化了多个对象的时候,就会在内存的堆中开辟不同的空间,存放具有相同功能的方法

如果实例化很多对象,就会造成内存浪费,甚至内存泄漏

原型和原型链

【面试题】

原型

原型关系图
请添加图片描述

prototype:原型对象

作用: 挂载到原型对象上的方法,可以被实例对象共享

语法

构造函数.prototype.方法名 = function(){}

特性:

  1. 这里特指构造函数,都会有一个prototype,这就是原型对象,也叫显式原型。挂载到原型对象上的方法和属性可以被共享

  2. 每一个实例对象,都会有一个__proto__, 现代浏览器也写作[[prototype]], 这就是对象的原型,也叫隐式原型,它会指向构造函数的原型对象。实际开发中,不会用到隐式原型,它只起到指向的作用(只想原型对象)

    p1.__proto__ === Person.prototype // true
    
  3. 每一个原型对象,都会有一个constructor,这是构造器,它会指回构造函数本身

    Person.protoype.constructor===Person // true
    
function Person(uname, age) {
    this.uname = uname
    this.age = age
    this.skill = function () {
        console.log('蹲草丛');
    }
}

// prototype: 原型对象
// 往Person这个构造函数的原型对象上挂载了一个location方法
Person.prototype.location = function () {
    console.log('打野');
}

let p1 = new Person('小妲己', 18)

let p2 = new Person('小貂蝉', 19)
console.log(p1.location === p2.location)
//true
//结论:p1实例对象的location方法和p2实例对象的location方法是同一个方法

原型链

原型链关系图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8e1jxH0-1678965096609)(F:\大前端\笔记\js\API\img\原型链关系图.png)]

概念

规定了属性和方法的查找规则:

原型链是原型对象创建过程的记录 ,当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构
当查找一个对象的属性时,JavaScript 会根据原型链向上遍历对象的原型,直到找到给定名称的属性为止,直到到达原型链的顶部仍然没有找到指定的属性,就会返回 undefined

特性:

  1. 构造函数的原型对象也是一个对象,它也会有一个__proto__,也就是隐式原型,它会指向Object的原型对象

    Person.prototype.__proto__ === Object.prototype // true
    
  2. Object的原型对象也是一个对象,它也会有一个__proto__,也就是隐式原型,它会指向null

    Object.prototype.__proto__ === null  // true
    
  3. Object的原型对象,也会有一个constructor,这是构造器,它会指回Object本身

    Object.prototype.constructor === Object // true
    

注意:Object是js中最大的那个对象,‘万物皆对象’

判断数据类型的方法

typeof

缺点:只能用来判断基本数据类型

typeof '123' 'string'
typeof 123 'number'
typeof null 'object'
typeof [1,2,3] 'object'
typeof {uname: '小妲己'} 'object'
typeof function() {} 'function'

constructor构造器

原理:实例对象本身是没有constructor属性的,但是可以根据原型链关系,实例对象可以使用构造函数的原型对象上的constructor构造器
缺点:不能判断undefined和null

[1,2,3].construtor // Array
{}.constructor // Obejct
'小妲己'.construtor // String
undefined.construtor //报错
unll.construtor//报错

instanceof

判断是否是构造函数的实例对象

缺点:不能判断基本数据类型
数组,函数,对象都是Object的实例对象,判断时,请把对象的判断放到最后

[1,2,3] instanceof Array // true

if (arr1 instanceof Array) {
    console.log('数组');
} else if (arr1 instanceof Function) {
    console.log('函数');
} else {
    console.log('对象');
}

Object.prototype.toString.call()

最完美的判断方法,可以判断所有数据类型

Object.prototype.toString.call([1,2,3]) // '[object Array]'
Object.prototype.toString.call({}) // '[object Object]'
Object.prototype.toString.call('小妲己') // '[object String]'
Object.prototype.toString.call(undefined) // '[object Undefined]'

// 函数封装
function getType(data) {
    return Object.prototype.toString.call(data)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值