Javascript中创建对象的方法

最新推荐文章于 2022-10-23 20:23:30 发布
最新推荐文章于 2022-10-23 20:23:30 发布
阅读量152 收藏
点赞数
分类专栏： JavaScript 创建对象 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yad_ya/article/details/109353430
版权
前提引入~

一个人称小仙女的妹子和一个苦逼埋头敲代码的程序猿的对话：

妹子：你缺对象吗

程序猿：缺对象还不简单么，自己创建一个就好了

所以在座的各位没有对象的，赶快new起来。

思考：

如何创建对象？？？

new 操作符 + Object 创建对象

var person = new Object();
    person.name = "lisi";
    person.age = 21;
    person.family = ["lida","lier","wangwu"];
    person.say = function(){
        alert(this.name);
    }

字面式创建对象

var person ={
	name: "lisi",
	age: 21,
	family: ["lida","lier","wangwu"],
	say: function(){
		alert(this.name);
	}
};

构造函数模式

function Person(name,age){//创建特定类型的对象，通过创建构造函数定义自定义对象类型的属性和方法
	this.name=name;//直接将属性和方法赋给this对象
	this.age=age;
	this.sayName=function(){
		alert(this.name);
	}
};

	var person1=new Person('zhangsan',20);
	var person2=new Person('wangwu',15);

原型模式

        
//创建的每个函数都有prototype属性，该属性既个指针，指向一个对象，这个对象包含了所有的实例共享属性以及方法
function Person(){};//创建一个空的构造函数
	Person.prototype.name='zhangsan';//将属性和方法添加到原型对象里
	Person.prototype.age=20;
	Person.prototype.sayName=function(){
		alert(this.name);
	}

	var person1=new Person();
	person1.sayName();   //zhangsan

	var person2=new Person();//再创建原型实例，实例对象就拥有了原型对象的属性和方法
	person2.sayName();   //zhangsan

组合构造函数模式和原型模式

function Person(name,age){      //构造函数模式
	this.name=name;
	this.age=age;
    this.friends=['shelly','lucy'];
};
Person.prototype.sayName=function(){      //原型模式
	alert(this.name);
}

var person1=new Person('zhangsan',20);      //构造函数模式
var person2=new Person('wangwu',15);

person1.friends.push('van');
alert(person1.friends);   //shelly,lucy,van
alert(person2.friends);   //shelly,lucy
//混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性，最大限度的节省了内存。

动态原型模式

//通过开关 动态添加函数的方法
<body>
  <button onclick="fn()">点击 增/删 sayName方法</button>
  <button onclick="xh()">点击实例化 小红 对象</button>

   <script>
        let flag = false;
        let xiaohong;

        function Person(name, age, gender) {
            //凡是后期需要修改的值 都放在构造函数的this.属性名称的方式来实现继承
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.like = ['小猫', '小狗', '小鸟'];
            //刚开始flag = false 所以实例化出来的方对象没有sayName方法
            if (flag) {
                Person.prototype.sayName = function() {
                    console.log(this.name);
                }
            } else {
                Person.prototype.sayName = null;
            }
        }

        function fn() {
            flag = !flag;
        }

        function xh() {
            xiaohong = new Person('小红', 16, '女');
            console.log(xiaohong);
        }

        //console.log(Person);
    </script>
</body>

工厂模式

function createPerson(){//使用函数来封装，看作为普通函数
	var o = new Object();
	o.name = name;
	o.sayName = function () {
		alert(this.name);
	}
	return o;//有返回值
}
var person1 = new createPerson('zhangsan');
var person2 = new createPerson('wangwu');

寄生构造函数模式

//除了使用new操作符并把使用的包装函数叫做构造函数之外，这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加一个return语句，可以重写调用构造函数时返回的值。
function Person(name, age, job) {//被看作为构造函数
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    }
    return o;
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

稳妥构造函数模式

function DurablePerson(name, age, job) {
    var o = new Object();
    o.say = function () {
        document.write("Hello，I'm " + name + "，" + age + " years old,i'm a " + job + "。<br/>"); //注意：不使用this，而使用参数传入的变量
    }

    return o;
}
//与寄生构造函数模式有些类型，但不同点有二：1，构造函数内部不使用this；2，创建对象实例不使用new
var person4 = DurablePerson("james", 29, "Ball Star");
//使用稳妥构造函数模式的优点是安全性。P161
//这种模式创建的实例也不能正确检测其类型：
document.write(person4 instanceof DurablePerson); //false
document.write(" --- ");
document.write(person4.constructor == DurablePerson); //false
document.write("<br/>");

document.write(person4 instanceof Object); //true
document.write(" --- ");
document.write(person4.constructor == Object); //true
document.write("<br/>");
Yad1219
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript创建对象的几种方式
qq_51781439的博客
09-07 1171
一、Object()创建对象、用字面量的方式创建对象 1.Object()创建对象 new Object()就是利用JavaScript提供的构造函数实例化了一个对象 var person = new Object(); //为这个实例化的对象添加属性 person.name = "zhangsan"; person.age =21; person.gender = 'male'; person.sayName = function(){ console.log(this.name) }
JavaScript 创建对象的五种方法
weixin_41309331的博客
09-19 178
JavaScript 是一门面向对象的编程语言（Object Oriented Programming），面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 在 JavaScript 中，有这么一句话：“万物皆对象”。 对象是一组无序的相关属性和方法的集合，例如字符串、数值、数组、函数等。这即是说，对象是由属性和方法组成的： 属性：事物的特征，在对象中用...
原型与原型链（二）
weixin_42283818的博客
10-07 420
prototype： 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。 例如： function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2 = new Person() console.log(person1.name) //kavin console.log(...
JavaScript this指向总结
ssk的博客
09-12 210
一 this指向 1.如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window function fx (){ console.log(this) } fx() 2.如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。（this的指向完全取决于函数调用的位置） const obj = { uname:'张三', abc: fun.
面向对象（重点中的重点）
D____ppx的博客
04-12 132
面向对象的概述 面向对象不是一个新的内容，而是一个编程思想（oop） 面向过程 1.去相亲网站 2.填写信息 3.确定目标 4.建立联系 5.约会 .... 面向对象 1.找对象（找个媒婆） 2.调用对象的方法（说媒） 面向对象的主要思维是找能做这个事情的对象（万物皆对象 所有的东西都能被当成对象） 了解对象 对象类型属于引用数据类型 关于对象的创建 对象的创建 直接赋值 let obj = {} //对象类型 使用new关键词 let obj = new Obje
js中的this指向上级调用者，apply传入数组，call传入对象
最新发布
vue
10-23 243
js中的this指向上级调用者，apply传入数组，call传入对象
Javascript 中创建自定义对象的方法汇总
10-25
这是最简单的创建对象的方式，通过大括号{}来直接定义对象及其属性和方法。例如： ```javascript var student = { name: "xiao ming", age: 20, getName: function () { alert(this.name); } }; ``` 这种...
javascript中创建对象的几种方法总结
10-26
在JavaScript中，有几种常见的创建对象的方法，这里我们将详细探讨这些方法。 1. **对象字面量**：这是最简单且直观的创建对象的方式。通过大括号 `{}` 创建一个空对象，然后通过点`.`或方括号`[]`来添加属性和方法...
javascript中创建对象的三种常用方法
10-28
在JavaScript中，创建对象是编程的基本操作之一，用于表示数据和功能。本文将详细阐述三种常用的创建对象的方法：字面量语法、构造函数和原型。这些方法各有特点，适用于不同的场景，理解并熟练掌握它们对JavaScript...
JavaScript中对象的不同创建方法
10-21
js对象与一般的面向对象的程序设计语言有所不同的。js中的对象是基本原型的。下面给大家介绍js中对象的不同创建方法，非常不错，感兴趣的朋友一起学习吧
javascript 获取上级、同级和下级元素
热门推荐
汪学友的博客
12-24 2万+
1. javascript 获取上级元素（父节点）​​​​​​ 1) parentNode 获取上级元素 //当前元素直接父元素，parentNode 是 W3C 标准 var parent = document.getElementById('test').parentNode; 2) parentElement 获取上级元素 //当前元素直接父元素，parentElement 是 IE 的标准 var paernt = document.getElementById('test').pare
JavaScript-类对象
cabbageboiling的博客
07-22 218
1、JavaScript使用类步骤 1.1 class定义类 1.2 new实例化类 2、类也有原型对象 3、类成员 3.1 类成员包括属性和方法，并且只能有属性和方法，在里面定义其他内容会报错 3.1.1 属性不需要用let(var)来定义，用来保存数据 3.1.2 方法用来加工数据，默认自带function关键字，并且函数里面有this 实例化的对象可以直接调用类里面的方法 const stu = new Student() stu.study() console.log(stu.na
构造函数、getter和setter方法以及后两者的意义
好好学习，天天向上
10-18 991
构造函数用于创建一个对象，为对象初始化个属性。例如：张三，23 但是一年后，张三年龄增长了一岁，或者他要改名字了，那这个对象总不能每年重新创建吧，这时setter就派上用场了。 对象创建成功后，我想获取它的（private）属性，只能通过getter方法来，这个更不能少。 目前阶段个人对getter和setter方法的理解是： 这两个方法可以方便增加额外功能（比
JavaScript中的this：只会指向它的上一级对象
乀兰陵笑笑生
05-04 1585
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被...
JavaScript创建对象的7种方法
张思阳的博客
04-19 434
面向对象可以把程序中的关键模块都视为对象，而模块拥有属性及方法。 这样我们如果把一些属性及方法封装起来，日后使用将非常方便，也可以避免繁琐重复的工作。 1.对象直接量 创建对象最简单的方式就是在JavaScript代码中使用对象直接量。 对象直接量是一个表达式，这个表达式的每次运算都创建并初始化一个新的对象。每次计算对象直接量的时候，也都会计算它的每个属性的值。 如果在一个重复调用的函数...
学习笔记之JavaScript查找上级作用域
Sys_菜菜
06-17 218
上级作用域 函数在哪儿定义的，它的上级作用域就是谁（和函数在哪儿执行没有关系） 我们来看一段代码 var num = 12; function fn() { var num = 120; return function() { consoloe.log(num); }; } var f = fn(); f(); (function () { var num =1200; f(); })() 白话 1、return 返回的东西，不进行预解释（r
JavaScript对象创建详解：5种方法解析
在JavaScript中，创建对象是编程的核心部分，以下是五种创建对象的方法： 1. 字面量语法： 这是最简单直接的方式，通过大括号`{}`来定义对象及其属性： ```javascript var obj = { name: 'John', age: 30 }; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值