JS面向对象

已于 2022-02-13 11:02:05 修改
阅读量104 收藏
点赞数
文章标签： javascript 开发语言 vscode 前端
于 2022-02-13 10:57:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47798191/article/details/122906249
版权

面向对象

对象：现实中一切事物皆为对象

面向对象的实体：包含属性和行为的集合

js没有类的概念，叫做对象，思想上是基于对象的，js下定义对象还是用函数体进行定义，

基于对象和面向对象的区别

面向对象：自己设置图纸，照着图纸盖房子

基于对象：别人有一个房子，我照着房子创建

面向对象的三大特征：封装、继承、多态

封装

每一个对象就是一个封装，把具有共同属性和行为的事物放在一起

定义对象

var a -->饿汉式

a=11

var a=11 -->懒汉式
  • 通过Object创建
var p=new Object()

        p.name="小明"//创建变量

        p.age=22

        p.say=function(){//创建方法

            console.log("我叫"+p.name,p.age)

        }

        p.say()//调用方法
  • 简写
var p={

            name:"小明",

            age:23,

            say:function(){

                console.log(this.name,this.age)

            }

        }

        p.say()

属性操作

configurable是否可以通过dalete删除

enumerable是否可以通过for-in进行遍历

writable是否可以修改属性

value给属性添加默认值

get获取属性的方法

set设置属性的方法

思想：限定陌生人不能操作，但是自己可以通过get和set访问

例如：

限定属性：

var obj={name:"小明",age:13}

Object.defineProperty(obj,"name",{

        configurable:false,

         writable:false,

             value:"小兰"

         })

   设置get,set：

var obj={_name:"小明",age:13}

       Object.defineProperty(obj,"name",{

           configurable:true,

           writable:false,

           enumerable:true,

           value:"小兰",

           get:function(){//获得变量

               return this._name+"111"

           },

            set:function(name){//修改变量

                 this._name=name

            }

         })

设置多个属性：

 var obj={_name:"小明",age:13}

        Object.defineProperties(obj,{

            name:{writable:false,},

            age:{enumerable:false}

        })

注意： writable 不能和set一起用，  enumerable不能和get一起用

自己创建get和set方法

 var obj={

            name:"小敏",

            age:22,

            getName:function(){

                return this.name

            },

            getAge:function(){

                return this.age

                

            },

            setName:function (name) {//外界

                this.name=name//内部

            },

            setAge:function(age){

                this.age=age

                

            }

        }

        console.log(obj.getName(),obj.getAge())

        obj.setName("小红")

        obj.setAge(34)

        console.log(obj.getName(),obj.getAge())

构造器

用来给对象赋初始值，构造器是一种特殊的函数，如果不写，js会自动分配一个默认无参的构造器

例如：

new关键字具体做了什么

  1. 创建了一个新对象
  2. 将构造器的作用域赋给新对象
  3. 用this关键字指向这个对象
  4. 通过proto寻找父类对象 
    function Emp(name,age) {//构造器

            this.name=name

            this.age=age

            this.say=function(){

                console.log(this.name,this.age)

            }

        }

 var e=new Emp("小丽",21)//调用构造器

e.say()

        console.log(e)

        var obj={}

        console.log(obj)

        e.name="小米"

        e.say()

  5. 返回新对象给调用者

私有变量

在对象下变量通过this关键字进行执行，表示通过地址找到对象下的属性和方法，如果要定义私有变量的属性和方法，可以不通过this关键字定义

例如：

function Emp(age){

            var name="小明"//私有变量

            this.age=age

        }

        var e=new Emp(22)

        console.log(e.age)

        console.log(e.name)

this指向

this关键字用于对象体内，用来指向对象下的属性和方法，方便调用

Global:在node环境下this的全局作用域指向Global

Window:在浏览器环境下this的全局作用域指向window

例如：

var a=11

console.log(a)

console.log(window.a)

console.log(this.a)

this的指向和在哪定义，在哪执行都没有关系

函数执行时，看函数前面是否有”.”,有的话，”.”前面是谁就指向谁，如果没有，就指向window

例如：

var name="我是window"

            var obj={

                name:"我是obj",

                info:function(){

                    console.log(this.name)

                }

            }

            console.log(obj.name)//obj

            console.log(window.name)//window

            console.log(name)//window

特殊情况

  1. 当this出现在匿名函数里，永远指向的是window

  例如：

 var name="我是window"

             var obj={

                name:"我是obj",

                info:function(){//匿名函数

                   return function(){return this.name

                   }

                }

            }

            var v= obj.info()()

            console.log(v)//window

2.当给一个dom元素绑定一个事件的时候，事件执行的方法，this指向的是当前元素

 btn.onclick=function(){

             this.name=222

            console.log(this)//指向btn按钮

            console.log(this.name)

        }

改变this指向 

var name="我是window"

            var obj={

                name:"我是obj",

                info:function(){//匿名函数

                var th=this//在obj环境下存一个对象

                return function(){

                       return th.name//window

                   }

                }

            }

           var v= obj.info()()

           console.log(v)//obj

继承

当子类继承父类对象时，可以直接拿到父类下的属性和方法，无需自己重新定义，减少代码写作，js下是单继承，用原型链实现

原型链

每个构造器都有一个原型对象，原型对象包含一个指向构造器的指针，name我们让原型对象指向另一个对象示例，就会实现机制

例如：

function Father(){

            this.name="张三"

            this.say=function(){

                console.log(this.name)

            }

        }

        function Son(){

            this.age=23

        }

        Son.prototype=new Father()//继承

        var s=new Son()

        console.log(s)

        console.log(s.age)

        console.log(s.name)//可以调用父类对象的属性和方法

        s.say()

多态-重写

子类和父类下有相同的方法。执行不同的操作，默认执行过程是，先找自己下的属性或方法执行，没有则去父类下找属性和方法，如果出现重名情况，则子类会覆盖父类的方法

function Father(){

            this.name="张三"

            this.say=function(){

                console.log("唱京剧")

            }

        }

        function Son(){

            this.age=23

            this.say=function(){

                console.log("唱流行歌曲")

            }

        }

        Son.prototype=new Father()//继承

        var s=new Son()

        console.log(s)

        s.say()//调用自己的方法，覆盖了父类的

改变this指向的方法->call,apply,bind

三个函数本身是用来改变this指向的可以在任何对象下使用，在继承关系里，我们来调用父类构造器，只是定义上有区别

调用对象.call(改变的对象,值1，值2....)call定义多个参数

调用对象.apply(改变的对象,[值1，值2....])apply只定义对象和数组

调用对象.bind(改变的对象,值1，值2....)bind返回一个函数自己手动执行

例如：

function Father(name,sex){

            this.name=name

            this.sex=sex

        }

        function Son(name,sex,age){

            this.age=age

            // Father.call(this,name,sex)

            // Father.apply(this,[name,sex])

              Father.bind(this,name,sex)()

         

        }

        Son.prototype=new Father()//继承

        var s=new Son("小明","男",23)

        console.log(s.age)

        console.log(s.name)//可以输出构造器里的赋值

        console.log(s.sex)

        console.log(s)

原型链的关键字

prototype:用来指向对象原型

_proto_:用来指向当前实例所属对象

constructor:用来指向构造器

实例有_proto_关键字，对象有prototype和constructor，构造器会有prototype

 

对象下的属性和方法

In判断属性是否属某个对象

Object.defineProperty()限定对象的属性操作

Object.defineProperties()限定对象的多个属性操作

Instanceof判断是否属于某个对象

Object.getPrototypeOf()获得对象原型

Object.isPrototypeOf()判断对象是否存在另一个原型上

Object.getOwnPropertyNames()返回对象下所有属性

Object.hasOwnProperty()判断对象自身是否有指定属性

Object.keys()返回对象可枚举的属性

Object.prototype.propertyIsEnumerable()判断是否是可枚举属性，返回布尔值

//console.log(s.prototype.propertyIsEnumerable("sex"))

Object.freeze()冻结一个对象，(只能查询）

//Object.freeze(obj)

Object.isFrozen()判断是否制冻结对象

Object.seal()密封一个对象，(只能查询和修改)

//Object.seal(obj)

Object.isSeal()判断是否是密封对象

Object.preventExtensions()让对象不可扩展(不能添加)

//Object.preventExtensions(obj)

Object.isExtensible()判断是否是不可扩展的对象

判断数组的方法有哪些

  1. Instanceof判断，但是会判断出父类对象

console.log(x instanceof Date)

  1. IsArray()Es5后新增的方法

console.log(Array.isArray(x))

  1. 通过构造器判断，每个对向都有自己的构造器

console.log(x.constructor==Array)(构造器)

  1. 通过prototype判断，如果是实例可以改变this指向

console.log(Object.prototype.toString.call(x)=="[object Array]")

  1. getPrototypeOf()返回原型进行判断

console.log(Object.getPrototypeOf(x)==Array.prototype)

判断对象的方法有哪些

同上，没有isArray()方法

typeof emp==”Object”//缺点null也会验证为对象

判断对象下的属性有哪些

  1. in 验证包括自身和原型的属性
function f(){

            this.name="zhang"



        }

        function s(){

            this.age=12

        }

        s.prototype=new f()

        var v=new s()

console.log("name" in v)//true
  1. hasOwnProperty验证自身对象的属性

console.log(v.hasOwnProperty("name"))//false

  1. 判断是否是undefined,验证包括自身和原型的属性

console.log(typeof v.age=="undefined")//false

console.log(v.name==undefined)//false

遍历对象的方法有哪些

  1. for in遍历 包括自身可枚举的和原型的属性

for(var k in v){

            console.log(k,v[k])

          }

    2.Object.keys()遍历自身属性

console.log(Object.keys(v))

    3.Object.getOwnPropertyNames()遍历自身可枚举和不可枚举属性

          console.log(Object.getOwnPropertyNames(v))

对象的复制

深拷贝和浅拷贝

浅拷贝：在引用变量赋值给另一个变量时，引用的是一个堆内存地址，当一个变量改变时，另一个变量跟着改变

深拷贝：在引用变量赋值给另一个变量时，开辟了一个新的堆内存地址，当一个变量改变时，另一个变量不改变

  1. 自己遍历，实现深拷贝
var obj={age:12,name:"zhang"}

            var o={}

            for(var v in obj){

                o[v]=obj[v]

            }

            obj.name="ss"

            console.log(obj)

            console.log(o)
  1. 借助数组的函数，凡是可以返回新数组的函数，都可以执行赋值
 var x=[1,2,3]

            var y=x.concat()

            x[0]=66

          console.log(x)//[66, 2, 3]

            console.log(y)// [1, 2, 3]
  1. 借助Object对象下的方法

var o=Object.assign(obj)//复制对象，实现浅拷贝

var o=Object.create(obj)//创建对象，实现深拷贝

  1. ES6下扩展运算符(...)

var x=[1,2,3]

var y=[...x]

        x[0]=22

        console.log(...x)//22 2 3

        console.log(y)//[1,2,3]

  1. Json数据格式

JSON.parse()转化成对象

JSON.stringify()对象转化成json

//var obj={name:"li",agr:12,color:["red","blue"],y:{a:1,b:2,c:3}}

 console.log(obj) console.log(JSON.stringify(obj))//{"name":"li","agr":12,"color":["red","blue"],"y":{"a":1,"b":2,"c":3}}

缺点：对象的属性如果是symbol类型是无法复制的

var obj={name:"li",agr:12,color:["red","blue"],y:{a:1,b:2,c:3}}

var json=JSON.stringify(obj)

var o=JSON.parse(json)

定义对象有哪些方式

  1. 工厂模式

  function Person(name){

            var o=new Object()

            o.name=name

            o.say=function(){

                console.log(o.name)

            }

            return o

         }

优点：能够解决创建多个对象的问题，兼容各个浏览器

缺点：没有解决对象识别的问题，不知道一个对象的具体类型

    2.构造函数模式

  function Person1(name){

            this.name=name

            this.say=function(){

                console.log(o.name)

            }

        }

优点：可以创建多个对象解决对象识别问题

缺点：每个对象都会创建不同function实例，如果完成同样的任务就没有必要。

    3.原型模式

  function Person(){}

       Person.prototype.name="xiaoming"

       Person.prototype.say=function(){

           console.log(o.name)}

优点：不用构造器传参，可以同时创建多个对象

缺点：原型的数据被共享，当属性被改变时，所有实例都改变

   4.组合使用构造器和原型模式

 function Person(name){

            this.name=name

        }

       Person.prototype={

           constuctor:Person,

           say:function(){

               console.log(this.name)

           }  

       }

优点：每个实例都有自己的属性副本，同时又共享了方法，既可以节省内存，又可以赋值

 5.动态原型模式

 function Person(name){

            this.name=name

            if(typeof this.say!="function"){

                    Person.prototype.say=function(){

                        console.log(this.name)

                    }

            }

        }

优点：满足组合模式的所有优点，并且代码比较规整，统一初始化

  6.寄生构造函数模式

  function toStrarr(){

        var arr=new Array()

        arr.push.apply(arr,arguments)

        arr.topstr=function(){

            return this.join("|")

        }

        return arr

}

优点：类似于工厂模式，用来给原型对象定义新的属性和方法，而无需自己创建新对象，节省内存。

  7.稳妥构造函数模式(最好的)

function Person(name){

        var o=new Object

        o.name=name

        _age=23

        if(typeof o.say!="function"){

            o.say=function(){

                console.log(this.name)

        }

    }

        return o

}

优点：可以定义私有变量，可以共享函数，可以节省内存，可以构造器赋值，代码更安全。

兔子^-^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js 面向对象实例
05-30
帮助理解js 面向对象，以及canvas 的使用
对象
weixin_46427936的博客
04-18 133
对象 何为对象：万物皆对象 客观世界中的具体的实体就是对象 如 一个人 一个气球 一辆汽车 每一个对象实体都有对应的特征 思考： 咱们班的班主任这个对象怎么描述 特征 行为 为什么要学习对象？ 思考：上述对象都是客观世界的，那JS这门语言中为什么要有对象呢 又如何用代码去描述一个对象呢 数组：是有序的元素集合 ，数组用于存放一组数据，比如一个班级所有人的名字，一个班级所有人的成绩。 函数：...
使用js模仿java的实体类对类/对象进行get操作
occultskyrong的专栏
09-16 5055
/** * Created by zrz on 2015/9/16，15:01. * @version 1.1.0 */var aa = { name: "张三", id: 110, address: "北京市和平门1路2街3胡同4门5户", phoneNumber: 12345678910, price: 220, off: 44 }; var
js解析json读取List中的实体对象
金溪的博客
04-28 3868
var obj = eval("("+data+")"); for(var key in obj){ //第一层循环取到各个list var List = obj[key]; for(var student in List){ //第二层循环取list中的对象 alert(List[student ].id); al...
js的对象
hc894127523的博客
04-15 2533
一JavaScript对象 1.JavaScript 对象是拥有属性和方法的数据 2.在 JavaScript中，几乎所有的事物都是对象 二JavaScript对象的分类 1.内置对象 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 2.宿主对象 宿主对象就是执行JS脚本的环境提供的对象。 对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象 3.自定义对象 创建对象方式. Js中创建自定义对象，主要通过三种方式
js面向对象
01-08
什么是面向对象 在js中对象是一个无序的数据集合或者也可以说是属性和方法的集合，可以动态的添加属性可方法。面向对象是一种软件开发的思想和面向过程是相对应的，就是把程序看作一个对象，将属性和方法封装其中，...
JavaScript 面向对象基础简单示例
10-16
主要介绍了JavaScript 面向对象基础,结合简单实例形式分析了JavaScript面向对象程序设计中类的定义、类方法与属性相关操作技巧,需要的朋友可以参考下
Javascript面向对象编程.
03-26
NULL 博文链接：https://goyourauntie.iteye.com/blog/1179204
JavaScript面向对象编程指南
07-22
资源名称：JavaScript面向对象编程指南内容简介： Javaｓｃｒｉｐｔ是一种具有高度表达能力的、基于原型特性的、非常灵活的面向对象编程语言。《Javaｓｃｒｉｐｔ面向对象编程指南》着重介绍Javaｓｃｒｉｐｔ在面向...
js中可获取后台传过来的实体类对象，获取方法如下：
热门推荐
y6s6y6y的博客
07-17 1万+
addressInit('Select3', 'Select4', 'Select5', '${rentsaleApply.province}', '${rentsaleApply.city}', '${rentsaleApply.county}'); 直接就可以使用美元符号获取到实体类中的值
javascript之对象
ajwqb06628的专栏
12-17 76
javascript之对象 一、创建对象 　　1、对象直接量。 　　　　var point = { x:0,y:0 };　　//point就是一个对象，跟C#不同，它不需要一定有类才能创建对象。 　　2、通过new创建对象 　　　　var d = new D...
js object对象转换为自定义对象
asuyunlong的专栏
10-09 5009
object对象转换为自定义对象 function Man() { this.id=0; this.name=""; this.sex=""; } function People() { this.name=""; this.sex="";
什么是js实例对象
EchoLiner的博客
08-08 3594
js实例对象是类的真实对象 ???? 举例： // ES5：生成实例对象的传统方法是通过构造函数 function Person(name, age, job) { this.name = name; this.age = age; this.job = job; } Person.prototype.sayName = function () { alert(this.name); }; var person1 = new Person("Nicholas",...
js的this指向
qq_60358807的博客
10-24 59
关于this指向问题我们看代码 var name='456' var obj={ name:'123', say:function(){ console.log(this.name); } } var obj1={ name:'789', say:(fn)=>{ ...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 121
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 200
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 243
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 760
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
JavaScript 面向对象
05-24
JavaScript 是一种基于原型的面向对象编程语言。在 JavaScript 中，对象是通过构造函数创建的，并且对象之间可以通过原型链共享属性和方法。 以下是 JavaScript 中面向对象编程的一些基本概念： 1. 构造函数：构造...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兔子^-^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值