JavaScript 自定义对象方法汇总

2024-09-27 06:19:51

一使用object创建对象

<script>
        // 创建对象
        var stu = new Object()
        // 给对象添加属性
        stu.name='jibu'
        stu[9527] = 'jibu'  //特殊属性名使用中括号
        // 为对象添加方法
        stu.study = function(){
            console.log('学习')
        }
        // 调用对象属性和方法
        console.log(stu.name,stu['name'])
        //调用方法
        stu.study()
    </script>

二使用构造函数创建对象

<script>
        // 1.定义一个构造函数创建对象
        function Student() {
            // 对象属性
            this.name = 'jibu'
            this.age = 18
                //对象的方法
            this.study = function() {
                console.log('正在学习......')
            }
        }
        // 2. 调用构造函数创建对象
        var stu = new Student()
        console.log(stu.name)
        stu.study()

        // 定义一个带参数的构造函数
        // 定义一个构造函数创建对象
        function Student(name, age) {
            // 对象属性
            this.name = name
            this.age = age
                //对象的方法
            this.study = function() {
                console.log('正在学习......')
            }
        }
        //调用构造函数创建对象
        var stu = new Student('tom', 18)
        console.log(stu.name)
        stu.study()
    </script>

三字面量创建对象

var stu = {
            name: 'jibu',
            age: 100,
            '特殊变量':1111
            study: function() {
                console.log('正在学习')
            },
            show: function() {
                console.log('我叫' + this.name, '年龄:' + this.age)
            }
        }
        console.log(stu.name)
        console.log(stu['特殊变量']

四 this 关键字

this 表示当前对象

函数中的this,表示调用函数的当前对象
事件绑定的匿名回调函数中的this，表示事件源
构造函数中的this,表示将来new出来的当前对象

示例一

<script>
        // 函数中的this，表示函数的调用者
        var a = 1

        function f1() {
            var a = 2
            console.log(this)
                // 解决局部变量和全局变量同名问题
            console.log('局部变量: ', a)
            console.log('全局变量: ', window.a)
            console.log('全局变量: ', this.a)

        }
        f1()
    </script>

示例二

 <script>
        window.onload = function() {
            document.querySelector('#btn').onclick = function() {
                console.log(this) //此处this表示事件源 触发事件的目标元素
            }
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button>
</body>

示例三

<script>
        function Student(name, age) {
            // 构造函数中this,表示将来new出来的当前对象
            this.name = name
            this.age = age
        }
    </script>

五基本数据类型和引用数据类型

基本数据类型

string,number,boolean,undefined,null

<script>
        var a = 5
        var b = a
        b = 8
        console.log(a)
        console.log(b)
    </script>

创建变量a,b引用a相当于赋值了一份，修改互不影响

引用数据类型

object,array,Student…

<script>
        var stu1 = {
            name: 'tom',
            age: 18
        }
        var stu2 = stu1; //将stu1地址赋值给stu2
        stu1.name = 'alice'
        console.log(stu1.name)
        console.log(stu2.name)
    </script>

这里会发现和基本数据类型操作一样但是结果不一样会互相影响，
这里就涉及到了内存问题

内存分为两种：

栈内存：

基本数据类型的变量和引用数据类型的变量的引用,会存储在栈内存中，存取速度比较快

堆内存：

引用数据类型的变量，会存储在堆内存中，存取速度较慢

引用数据类型的变量会存储在栈里面(内存地址)，其对象会存储在堆里面，stu2引用stu1其实就是内存地址的引用是一样的，所有修改的时候结果都是一样的

基本数据类型的变量和值都是存储在栈中的，把a的值给b，所有修改互不影响

六闭包

如何理解闭包？

在一个函数内部又定义了一个函数，这个定义在内部的函数就是闭包
闭包能够读取其他函数内部变量的函数
闭包是某个作用域内定义的函数，该函数可以访问这个作用域的所有变量
从作用上来说，闭包就是将函数内部和外部函数连接起来的一座桥梁

闭包的用途

在函数的内部，可以读取到函数内部的变量
让变量的值始终保存在内存中

闭包的使用

   <script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = function() {
                    console.log('点击了第' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>
    <style>
        ul {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <button onclick="add()">添加元素</button>
    <ul id="myul">

    </ul>
</body>

因为循环在点击元素按钮的时候就已经结束了，所有始终获取的都是最后一个，这就形成了闭包

解决方法一：

不在函数内部定义含，将函数定义在外面，在函数内部调用

<script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = createLi(i)
                document.getElementById('myul').appendChild(li)
            }
        }

        function createLi(num) {
            var li = document.createElement('li')
            li.innerText = 'li' + num
            li.onclick = function() {
                console.log('点击了第' + num + 'li')
            }
            return li
        }

解决方法二：

为元素添加属性用来存储变量

<script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.num = i; //存储数据
                li.onclick = function() {
                    console.log('点击了第' + this.num + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>

解决方法三：

使用let定义变量

块级作用域，它所申明的变量所在的区域不会收到外部影响，称为暂时性死去

<script>
        function add() {
            for (let i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = function() {
                    console.log('点击了第' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>

七 Json

JavaScript Object Notation 是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式，采用与编程语言无关的文本格式，易于编写和阅读，同时也易于解析和生成

基本用法

{“属性名”:“属性值”,“属性名”:“属性值”…}

注意：

Json结构是由一系列的键值对组成，称为Json对象
属性名使用双引号
Json和对象字面量的区别：JSON属性必须使用双引号，而对象字面量可以不加

符合属性

<script>
        //复合属性 值为json对象
        var user = {
            "name": {
                "firstName": "ji",
                "lastName": "bu"
            },
            "age": 100
        }
        console.log(user.name.firstName)
    </script>

Json对象的集合

<script>
        //复合属性 值为json对象
        var user = [{
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                },

            ]
            //循环
        for (var i = 0; i < user.length; i++) {
            console.log(user[i])
        }
    </script>

JSON 操作

 <script>
        //JSon对象转换成字符串
        var stu = {
            "id": 1,
            "name": "jibu"
        }
        console.log(typeof stu)
        var str = JSON.stringify(stu);
        console.log(typeof str)

        // 将字符串转成JSON
        var str = '{"id": 1,"name": "jibu"}'
        console.log(typeof str)

        var obj = JSON.parse(str)
        console.log(typeof obj)
    </script>

到此这篇关于JavaScript 自定义对象介绍的文章就介绍到这了,更多相关JavaScript 自定义对象内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Javascript 中创建自定义对象的方法汇总

Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 复制代码代码如下: var student = new Object(); student.name = "xiao ming"; student.age = 20; student.getName = function () { alert(th
JS创建自定义对象的六种方法总结

1.创建一个 Object 实例 var person = new Object(); person.name = "rose"; person.age = 18; person.job = "actor"; person.sayName = function () { console.log(this.name); }; console.log(person); 2.对象字面量 var person = { name: "rose", age:
JS自定义对象实现Java中Map对象功能的方法

本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容! 这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: 复制代码代码如下: /** *
JS自定义对象创建与简单使用方法示例

本文实例讲述了JS自定义对象创建与简单使用方法.分享给大家供大家参考,具体如下: <html> <head> <title>js自定义函数</title> <meta charset="UTF-8"/> <script type="text/javascript"> //创建自定义对象 //方法一: // var obj=new Object(); //方法二 var obj={}; obj.n
JavaScript实现创建自定义对象的常用方式总结

本文实例讲述了JavaScript实现创建自定义对象的常用方式.分享给大家供大家参考,具体如下: 1. 对象字面量方式对象字面量方式是创建自定义对象的首选模式,简单方便. var per = { name:'zhangsan', age:25, job:'html', sayName:function(){ alert(this.name); } } 缺点:使用同一个接口创建很多对象,会产生大量的重复代码.比如我想再创建一个per1对象,我就得把上面的代码再重新写一遍,改变不同的属性值. 2.
JavaScript 自定义对象方法汇总

目录一使用object创建对象二使用构造函数创建对象三字面量创建对象四 this 关键字 this 表示当前对象五基本数据类型和引用数据类型基本数据类型引用数据类型六闭包如何理解闭包? 闭包的用途闭包的使用七 Json 基本用法符合属性 Json对象的集合 JSON 操作一使用object创建对象 <script> // 创建对象 var stu = new Object() // 给对象添加属性 stu.name='jibu' stu[9527] = '
JavaScript自定义数组排序方法

本文实例讲述了JavaScript自定义数组排序方法.分享给大家供大家参考.具体分析如下: Array中有自带的排序功能,这个使用起来比较方便,我们有一点必须清楚,就是排序的依据,如果sort不传入参数的话,那就是按照字符编码(Unicode编码)的顺序排序. var a=["3","2","1"]; console.log(a[0].charCodeAt(0)); // 51 console.log(a[1].charCodeAt(0)); /
27个JavaScript数组常见方法汇总与实例说明

1. push() 概括:数组末位增加参数:需要增加的数据返回值:数组更新后的长度 let arr = [1,2,3] arr.push(1) // 返回新增后的数组长度 4 arr.push() // 不传参数默认不新增 4 arr.push(1,2,3) // 新增多条数据时,返回新增完成后的数组长度 7 2. pop() 概括:数组末位删除参数:无返回值:删除的数据 let arr = [3] arr.pop() // 返回已删除的数据 3 arr.pop() // 当数组数据为空
javascript数组去重方法汇总

javascript数组去重方法汇总 Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; }; Array.pro
JavaScript基于对象方法实现数组去重及排序操作示例

本文实例讲述了JavaScript基于对象方法实现数组去重及排序操作.分享给大家供大家参考,具体如下: <script> //用对象方法实现数组去重 Array.prototype.unique = function() { var newArr = []; for (var i = 0; i < this.length; i++) { if(newArr.indexOf(this[i]) == -1){ newArr.push(this[i]); } } return newArr;
Prototype中dom对象方法汇总

以下部分一个一个的详细介绍: $(element):getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使用$方法,会自动调用Element.extend(element)方法,这样的话使元素可以直接调用Element中的方法, 例如Element.hide(element)可以写成这样$(element).hide() document.getElementsByClassName(className, parentElemen
javascript 数组使用方法汇总

//Author :东阁 //Date:2008-1-11 //目的: 练习数组的基本操作 /* 由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同的类型,数组的元素设置可以包含其他数组,这样就可以创建一个复杂的数组了. 并且在这点上说javascript作为一种脚本语言不同于那种严格的面向对象的c++.c#,java了.具有更高的灵活性. */ /* *在javascript1.1和其后的版本中,数组是用构造函数Array()
Javascript 自定义类型方法小结

1. 定义类型复制代码代码如下: function UserObject(parameter) { } parameter 可省略,相当于C#中构造函数参数. 2. 实例化自定义类型复制代码代码如下: <script type="text/javascript"> function userobject(parameter){ } //myobject is now an object of type userobject! var myobject=new use
JavaScript跨域方法汇总

做Web开发经常需要面对跨域问题,跨域问题的根源是浏览器安全中的同源策略,比如说,对于http://www.a.com/1.html来说: 1.http://www.a.com/2.html是同源的: 2.https://www.a.com/2.html是不同源的,原因是协议不同: 3.http://www.a.com:8080/2.html是不同源的,原因是端口不同: 4.http://sub.a.com/2.html是不同源的,原因是主机不同. 在浏览器中,<script>.<img
javascript进行四舍五入方法汇总

原生 javascript 中四舍五入的函数 toFixed(n) , n为要保留的小数位数. (0<= n <=20) 复制代码代码如下: var num=1.0999; console.log(num.toFixed(20)); http://jsfiddle.net/14x0vhu6/ 输出值不是预想的1.0999,而是 1.09990000000000009983,这点需要注意,至于原因有待完善. 另外在不同的浏览器版本中,如果小数点前和要截取的前一位都是0时,可能出现不按常理截取