js创建对象的方式

时间:2022-10-24 17:04:19
<!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创建对象的方式