Javascript面向对象——创建对象、构造函数的原型

简介: Javascript面向对象——创建对象、构造函数的原型

Javascript面向对象——创建对象、构造函数的原型


其实:JavaScript中的创建类,就是创建一个构造函数,在创建对象时用到new这个关键字,


一、创建对象

1.函数创建对象

function creatObj(name,age){
    //手动创建一个对象
    var obj={}
    //为对象添加属性
    obj.name=name
    obj.age=age
    obj.sayHi=function(){
      console.log("hello world!")  
    }
    //返回对象
    return obj
}
//调用方法创建不同对象
var obj1=creatObj("小明",18)
var obj2=creatObj("小花",20)


2.自定义构造函数创建对象

构造函数使用

1、构造函数和普通函数没有区别,只是在调用是和new一起使用

2、书写构造函数时,函数首字母大写

=>当看到首字母大写时就知道要用new关节字去调用

3、调用时要用new关键字

=>如果没有就不会自动创建对象、不会自动返回对象,也不能用this

function CreatObj(name,age){     //构造函数首字母大写
    //自动创建一个对象
    //为对象添加属性
    this.name=name       //this代表了指向调用的对象
    this.age=age
    this.什么=什么
    this.obj.sayHi=function(){
      console.log("hello world!")  
    }
    //自动返回对象  
}
//调用方法创建不同对象
var obj1=new creatObj("小明",18)     //加了一个new
var obj2=new creatObj("小花",20)


二、构造函数的原型(prototype)

定义:每一个函数天生自带的属性,叫做prototype,是一个对象

=>既然prototype是一个对象,我们就可以使用操作对象的语法,向里面添加内容

作用:当函数里面没有想调用的属性或方法时,就会去函数的原型里面去找。

不合理性:如果把方法直接写在函数体里面时(如上一个例子所示),每创建一个对象时都会从新创建一个方法。(造成资源浪费)

解决办法:使用函数原型,如果把方法放在原型里面后,不同对象创建的方法都是同一个方法。

//格式:构造函数.prototype.方法名=function(){    }
//为Creatobj的原型添加方法
Creatobj.prototype.sayHi=function(){
    consle.log("hello world!")
}
function Creatobj(name,age){     //构造函数首字母大写
    //自动创建一个对象
    //为对象添加属性
    this.name=name       //this代表了指向调用的对象
    this.age=age
    this.什么=什么
    //自动返回对象  
}
//调用方法创建不同对象
var obj1=new creatObj("小明",18)     //加了一个new
var obj2=new creatObj("小花",20)
//调用Creatobj里原型的方法
 obj1.sayHi() //可以正常调用


1.对象自带的方法(__proto__)

概念:每个对象天生自带属性__proto__,指向构造函数是prototype,当访问对象成员时先在自己身上找不到再去找__proto__

//构造函数
function Person(){
}
//给Person的原型赋值
Person.prototype.a=100
Person.prototype.say=function(){
    console.log("hello")
}
//创建两个对象
var p1=new Person()
var p2=new Person()
//判断对象的里
console.log(p1.__proto__===Person.prototype)
console.log(p2.__proto__===Person.prototype)
//结果都为true,
//说明所有对象使用同一个原型


2.原型链

原型链概念:

1、用__proto__ 串联起来的对象链状结构

2、每一个对象类型都有一个属于自己的原型链

3、作用:为了访问对象成员


访问机制

当你需要访问对象的成员的时候

首先在自己身上查找,如果有直接使用

如果没有,会自动去__proto__ 上查找

如果还没有,会再去__proto__ 上查找

直到objiect.prototype都没有,那么返回undefined

//构造函数
function Person(){
}
//给Person的原型赋值
Person.prototype.a=100
Person.prototype.say=function(){
    console.log("hello")
}
//创建两个对象
var p1=new Person()
var p2=new Person()

看上面代码回答问题


问题1:实例对象的 __proto__ 指向谁?

=>指向所属构造函数的原型prototype

=>p1 所属的构造函数是Person

=>p1. __proto__ 指向Person的prototype


问题2:Person.prototype的 __proto__ 指向谁?

=>Person.prototype所属的构造函数是谁?

=>Person.prototype是个对象数据类型(Object)

=>在JS里所有的Object数据类型都是属于Object这个内置构造函数的

=>Person.prototype的 __proto__ 指向Object.prototype


问题3:Person的 __proto__ 指向谁的?

=>Person是个函数,函数本身就是一个对象,就会有 __proto__

=>在JS里所有的函数都是属于Function这个内置构造函数的实例

=>Person. __proto__的 指向Function.prototype


问题4:Objiect.prototype的 __proto__ 指向谁的?

=>Objiect.prototype是个对象数据类型,所有的对象都是属于Object这个内置构造函数的。

=>注意:Objiect.prototype在JS中是顶级原型,是没有 __proto__

=>Objiect.prototype的 __proto__ 指向null


问题5:Objiect的 __proto__ 指向谁的?

=>Objiect是个内置构造函数,同时是一个函数,也是一个对象

=>在JS里所有的函数都是属于Function这个内置构造函数的实例

=>Objiect的 __proto__ 指向Function.prototype


问题6:Function.prototype的 __proto__ 指向谁的?

=>Function.prototype是对象数据类型

=>在JS里所有的对象都是属于Object这个内置构造函数的实例

=>Function.prototype的 __proto__ 指向Object.prototype


问题7:Function的 __proto__ 指向谁的?

=>Function是个内置构造函数,同时是一个函数,也是一个对象

=>在JS里所有的函数都是属于Function这个内置构造函数的实例

=>Fanction 自己是自己的构造函数

=>Fanction 自己是自己的实例对象

=>Function的 __proto__ 指向Function

相关文章
|
2月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
25 0
|
4月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
45 7
|
7天前
|
JavaScript 前端开发
js创建对象| 25
js创建对象| 25
|
7天前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
26 1
JavaScript基础知识-构造函数(也称为"类")定义
|
3天前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
8 0
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
29 1
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-使用工厂方法创建对象
本文介绍了JavaScript中使用工厂方法来创建对象的基础知识。
25 0
JavaScript基础知识-使用工厂方法创建对象
|
2月前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
|
2月前
|
JavaScript 前端开发
JavaScript中什么是原型?有什么用?
JavaScript中什么是原型?有什么用?
15 1