首页 > 其他分享 >js创建对象的方式

js创建对象的方式

时间:2022-10-24 15:33:42浏览次数:49  
标签:bobo console log 方式 age 创建对象 js obj name

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建对象的方式</title>
</head>
<body>
<script>
// 所有 JavaScript 对象都从原型继承属性和方法
// Object.prototype 位于原型继承链的顶端

// 字面量的方式去创建对象
const obj = {}
console.log(obj);

// 构造函数 创建对象
// 通过创建自定义对象===>
// 当new一个对象的时候做了四件事情
// 1.开辟空间存储当前对象
// 2.把this设置为当前对象
// 3.设置属性和方法
// 3.把this对象返回
function Person(name,age){
console.log(this,'我是构造函数的this'); // Person {} 指的是当前对象
this.name = name
this.age = age
}
// 原型上面的属性和方法依旧可以直接访问到
Person.prototype.sex = "男";
Person.prototype.getAddr = function(){
return '深圳市宝安区'
}
const personInfo = new Person('bobo',20)
console.log(personInfo,personInfo.sex,personInfo.getAddr()); // Person {name: 'bobo', age: 20} '男' '深圳市宝安区'

const newObj = Object.create(Object.prototype)
const newObj1 = Object.create(null)
console.log(newObj); // {}
console.log(newObj1); // {} No properties

// new字符创建对象
let nObj = new Object()
nObj.name = 'bobo'
nObj.getName= function() {
console.log("我叫bobo")
}
console.log(nObj); // {name: 'bobo', getName: ƒ}

// 工厂函数创建对象 先内部 new一个对象然后返回这个对象
function createObj(name,age) {
let obj = new Object();
obj.name = name;
obj.age = age;
obj.getName = function(){
console.log(obj.name)
}
return obj;
}
let cObj = createObj('bobo',20)
console.log(cObj.age); // 20
cObj.getName(); // bobo
</script>
</body>
</html>



运行结果

js创建对象的方式_html

标签:bobo,console,log,方式,age,创建对象,js,obj,name
From: https://blog.51cto.com/u_15785499/5789916

相关文章

  • vue本地项目启动时遇到coreJs相关报错问题处理
    启动项目的时候报错:   是因为core.js这个包丢失,需要大家重新下载即可;yarnaddcore-js ......
  • d3js(D3JS 不规则图形)
    d3js做的图表怎么放在html中的指定位置啊定义div的id,比如为id1,定义svg时用d3.select("#id1")而不是d3.select("body")SingleSelection参考例子:#varsvg=d3.sele......
  • leetcode 32. 最长有效括号 js实现
    https://leetcode.cn/problems/longest-valid-parentheses/给你一个只包含'(' 和')' 的字符串,找出最长有效(格式正确且连续)括号子串的长度。示例1:输入:s="(()"输出......
  • 调用layer内部js方法
    调用layer内部名为Func的方法$("#layui-layer-iframe"+layerId)[0].contentWindow.Func();获取layerIdlayerId=layer.open({type:2,......
  • Java-JVM调优jstack找出最耗cpu的线程&定位问题代码
    Java-JVM调优jstack找出最耗cpu的线程&定位问题代码 https://blog.csdn.net/shasiqq/article/details/109801683   JVM调优jstack找出最耗cpu的线程&定位问题代码......
  • 常用的js方法
    方法名功能是否会改变原数组备注string.trim()去除字符串的头尾空格否不适用于null,undefined,Number类型array.reverse()颠倒数组中元素的顺序是......
  • 【JS】459- 理解JavaScript中null、undefined和NaN
    当您开始学习JavaScript时,首先需要学习的是数据类型。只要我们讨论​​Number​​​、​​String​​​、​​Boolean​​​和​​Object​​​时,一旦涉及到​​null​​​......
  • Code还是NoCode,哪种方式适合你?
    NoCode是一种补充技术堆栈中传统编码的工具。只有某些项目非常适合NoCode介绍NoCode是一个伟大的概念,它使非程序员无需成为软件开发人员即可构建应用程序;但是,有些人认为......
  • 【JS】501- 一文学会判断变量是否为数组
    日常开发中,我们经常遇到这种情况,需要我们判断变量是否是一个数组类型。那么今天我把常用的判断变量是否是数组类型的方法,整理在这里:一、常用方法1.Object.prototype.toStri......
  • vue组件通信方式有哪些?
    vue组件通信方式一、props(父向子传值----自定义属性)/$emit(子向父传值-----自定义事件)父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信......