JavaScript-高级-创建对象

简介: JavaScript-高级-创建对象

ECMAScript 有两种开发模式

一种是面向过程,一种是面向对象。

面向过程:

<button type="button" onclick="javascript:console.log('1');console.log('2');">按钮</button>

面向对象 :

<button type="button" onclick="fn1()">按钮</button>
    <script>
        function fn1(){
            console.log('1');
            console.log('2');
        }
    </script>

一、创建对象的几种方法

第一种方法:使用对象字面

,这是创建对象简洁明了的一种方法,可以在一条语句中定义和创建对象

用{}即可

var person = {name:'Nanchen', age:12,sex:'男', color:'gray'};
    console.log(person);

效果如图:

20210917203547473.png

对象也可以横跨多行去书写,效果是一样的

var person = {
            name: 'Nanchen',
            age: 12, sex: '男',
            color: 'gray'
        };

第二种方法:使用JavaScript关键字new

效果和第一种方法一致

var person = new Object();
        person.name = 'Nanchen';
        person.age = 13;
        person.sex = '男';
        person.color = 'gray';
        console.log(person);

第三种方法:工厂方法创建对象

这种就属于用构造函数创建对象

function createObject(name, age,sex,color) {
    var box = new Object();
    box.name = name;
    box.age = age;
                box.sex = sex;
                box.color = color;
    box.run = function() {
      // console.log(this);
      return 'ID:'+this.name+' 年龄:'+this.age+' 性别'+this.sex+' 喜欢的颜色'+this.color;
    }
    return box; //很重要
    }
            var a = createObject('Nanchen',18,'男','gray')
                console.log(a);
                console.log(a.run());

20210917212223319.png

构造函数和普通函数的唯一区别,就是他们调用的方式不同。 构造函数也是函数,必须用new运算符来调用,否则是无法创建对象的  

探讨构造函数内部的方法(或函数)的问题,首先看下两个实例化后的对象的属性和方法是否相等。

var box1 = new Box('Lee', 100);   //传递一致
var box2 = new Box('Lee', 100);   //同上
alert(box1.name == box2.name);    //true,属性的值相等
alert(box1.run == box2.run);    //false,方法其实也是一种引用地址
alert(box1.run() == box2.run());  //true,方法的值相等,因为传参一致

可以把构造函数里的方法(或函数)用new Function()方法来代替,得到一样的效果,更加证明,他们最终判断的是引用地址,唯一性。  

function Box(name, age) {    //new Function()唯一性
    this.name = name;
    this.age = age;
    this.run = new Function("return this.name + this.age + '运行中...'");
}

我们可以通过构造函数外面绑定同一个函数的方法来保证引用地址的一致性。

如下:

function Box(name,age,sex,color){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.color = color;
            this.run = boxMethod;
        }
        function boxMethod(){
            console.log(this);
            return 'ID:'+this.name+' 年龄:'+this.age+' 性别'+this.sex+' 喜欢的颜色'+this.color;
        }
        console.log(boxMethod());

20210917212722200.png

使用了全局的函数run()来解决了保证引用地址一致的问题。但需要注意的是,全局函数run中的this,在对象调用的时候是Box本身,而当作普通函数调用的时候,this又代表window。  

function Box(name, age) {
    this.name = name;
    this.age = age;
    this.run = run;
}
function run() {       //通过外面调用,保证引用地址一致
    console.log(this);
    return this.name + this.age + '运行中...';
}
var box1 = new Box('Lee', 100); 
box1.run();                           //run函数中打印Box对象
run();                                //run函数中打印Window对象

JavaScript对象属性

属性是JS对象最重要的部分。属性也可以被修改、添加和删除,但是也有一些特殊属性是只读的。

访问 JavaScript 属性

访问js属性有两种方法可以使用.property 或 ["property"]

<p></p>
    <script>
        var person = {
            name:'Nanchen',
            age:13,
            sex:'男',
            color:'gray',
            run : function(){
                console.log('你好吗?');
                return person;
            }
        }
        var p = document.querySelector('p');
        p.innerHTML = 'ID:'+person.name+' 年龄:'+person.age+' 性别'+person.sex+' 喜欢的颜色'+person.color;
        //p.innerHTML = 'ID:'+person['name']+' 年龄:'+person['age']+' 性别'+person['sex']+' 喜欢的颜色'+person['color'];//效果一致
        console.log(person.run()); 
    </script>

20210917210634884.png

修改属性:直接更换即可,例如:

person.age = 18;

添加新属性

假设 person 对象已存在 - 那么您可以为其添加新属性:

person.curriculum= "English";

删除属性

delete 从对象中删除属性:

delete person.curriculum;


相关文章
|
3月前
|
JavaScript 前端开发
js创建对象| 25
js创建对象| 25
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-使用工厂方法创建对象
本文介绍了JavaScript中使用工厂方法来创建对象的基础知识。
30 0
JavaScript基础知识-使用工厂方法创建对象
|
6月前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
64 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
7月前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
7月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
7月前
|
设计模式 JavaScript 前端开发
JavaScript工厂模式:创建对象的简便方式!
JavaScript工厂模式:创建对象的简便方式!
|
6月前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
62 0
|
7月前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
38 6
|
7月前
|
存储 JavaScript 前端开发
JavaScript高级主题:JavaScript 中的 Map 和 Set 是什么?它们有什么区别?
JavaScript的ES6引入了Map和Set数据结构。Map用于存储键值对,适合通过键进行查找,而Set则存储唯一值,无键且不支持键查找。两者在性能上表现出色,尤其在频繁的写入删除操作中。选择使用哪个取决于具体应用场景:键值对需求选Map,独特值集合则选Set。
54 2
|
7月前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结