demo.html(创建对象的三种传统方式):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//如何创建一个对象
//1.对象字面量 {key:value,key:value...}
//只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高
// var obj = {
// name:"演员",
// singer:"薛段子手",
// type:"流行"
// };
//
// var obj1 ={
// name:"吻别",
// singer:"张学友",
// type:"流行"
// }
//2.使用内置构造函数
// var obj = new Object();
//
// obj.name = "一千个伤心的理由";
// obj.singer = "张学友";
// obj.sing = function () {
// console.log("一千个伤心的理由");
// }
//
// var obj1 =new Object();
// obj.name = "一千个伤心的理由";
// obj.singer = "张学友";
// obj.sing = function () {
// console.log("一千个伤心的理由");
// }
//3.封装简单的工厂函数 (不推荐使用了)
function createSong(songName,singerName){
var o =new Object(); // 每次调用new都是开辟新的内存,所以多次createSong()都是不同的对象。
o.name = songName;
o.singer = singerName;
o.sing = function () {
console.log("让我来唱首歌");
}
return o;
}
var obj = createSong("演员","薛之谦");
var obj1 = createSong("一言难尽","张宇");
</script>
</head>
<body>
</body>
</html>
demo.html(自定义构造函数创建对象(推荐方式)):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//创建对象的方式
//4.自定义构造函数 Object Array
//什么是构造函数?
//构造函数其实也是函数,但是通常用来初始化对象
//并且和new关键字同时出现
//new 是用来创建对象的
//构造函数是用来初始化对象的(给对象新增成员)
//构造函数名,首字母要大写!!!以示区分
function Person() {
//默认隐含的操作:把刚才用new新创建出来的对象赋值给this
this.name = "尼古拉斯凯奇";
this.age = 50;
this.sayHello = function () {
console.log("Hey man");
}
//如果这里写其他的代码,会执行吗? 肯定会
return null; // return空、null、基本数据类型,都不会起作用。会默认return this; return object类型才会起作用。
}
var p = new Person(); //new Object(); 如果构造函数没有参数那么小括号可以省略。
console.log(p);
p.sayHello();
//构造函数的执行过程
//1.使用new关键字创建对象
//2.调用构造函数,把新创建出来的对象赋值给构造函数内的this
//3.在构造函数内使用this为新创建出来的对象新增成员
//4.默认返回新创建的这个对象 (普通的函数,如果不写返回语句,会返回undefined)
//构造函数的返回值
//1.如果不写返回值,默认返回的是新创建出来的对象(this) (一般都不会去写这个return语句)
//2.如果我们自己写return语句 return的是空值(return;),或者是基本类型的值或者null,都会默认返回新创建出来的对象
//3.如果返回的是object类型的值,将不会返回刚才新创建的对象,取而代之的是return后面的值
</script>
</head>
<body>
</body>
</html>
demo.html(自定义构造函数创建对象的注意事项):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//对象是无序的键值对儿的集合 (数组是有序的)。 自定义构造函数Animal()
function Animal(name, type, barkWay) {
this.name = name; // 如果不使用new调用Animal(),而是直接Animal()调用,那么this就是window全局对象。
this.type = type;
this.bark = barkWay;
}
var dog = new Animal("大黄","BYD",function () { //通过自定义构造函数Animal()创建对象。
console.log("汪汪汪");
});
console.log(dog);
//注意:如果像使用正常函数一样使用构造函数(不使用new关键字)构造函数中的this将不再指向新创建出来的对象
//(因为根本就没有创建对象),构造函数中的this这个时候指向的就是window全局对象
Animal("","",function () { //这是一个错误的演示。 不使用new调用构造函数,那么构造函数中的this就是window
console.log("我是函数");
});
window.bark();
//获取具体类型的方式
//var typeStr = Object.prototype.toString.call(想获取类型的对象)
//typeStr = typeStr.slice(8, -1)
</script>
</head>
<body>
</body>
</html>