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


文章名称:Javascript面向对象——创建对象、构造函数的原型
地址分享:http://bzwzjz.com/article/dsojhpj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计公司 营销型网站建设 成都网站设计 成都网站建设 成都网站设计 网站制作 网站建设改版 手机网站制作 网站制作 成都网站制作 网站设计 成都网站建设 成都企业网站建设 专业网站设计 定制网站设计 专业网站建设 重庆企业网站建设 成都定制网站建设 企业网站设计 成都网站制作公司 成都网站建设 定制网站制作