JavaScript-6(对象，构造函数，原型)
一、 Object对象
1.Object 对象的概念
- 对象可以看做是属性的无序集合
2.创建对象Object
-
直接量 {}
-
构造函数 new Object()
<script> //创建对象 var obj = {name:"hello", age:19, "grade":"h516", "user-pass":"123456", "for":[1,234,4]}; obj.name = "哈哈哈"; obj.address = "上海"; console.log(obj); //读取 对象的属性 console.log(obj.name); console.log(obj.age);//运算符. console.log(obj["grade"]);//运算符[] console.log(obj["user-pass"]); console.log(obj.for); //构造函数方式 创建数组 var obj = new Object({username:"lili",userpass:"1213"}); //obj.username = "lili"; //obj.userpass = '1213'; obj["usergrade"] = "h516"; console.log(obj); </script> -
运行截图
3.对象属性的操作
-
运算符
. -
运算符
[]:方括号里的东西必须加引号 -
属性检测 in
-
删除属性 delete
<script> var obj = {name:"lili", age:90, grade:"H516", list:[1,2,3]}; console.log(obj); delete obj.grade;//删除 console.log(obj); //检测属性 console.log("name" in obj);//true 必须加引号 console.log(name in obj);//false console.log("aname" in obj); </script>
4.方法
-
方法也是属性
<script> var obj = {name:"丽丽", age:190, getInfo:function(){ console.log("hahaha"); }} obj.say = function(){ console.log("哈哈哈哈"); } obj.getInfo();//输出hahaha obj["say"]();//输出哈哈哈 </script>
5.Object 遍历
-
for in
-
[] 运算符
<script> var obj = { name:"丽丽", age : 19, grade : "H516" }; for (var i in obj) { console.log(i);//遍历属性名 console.log(obj[i]);//遍历属性值 console.log(obj.i);//undefined,相当于调用属性名为i的属性值 } </script> -
运行截图
二、构造函数
1.构造函数
- 每个对象都有与之对应的构造函数
- 一个构造函数可以有多个对象
2.构造函数判断
-
运算符 instanceof
-
对象的属性 .constructor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>构造函数判断</title> </head> <body> <div id="box"></div> <script> var obj = {name:"helo"}; console.log(obj.constructor); var arr = [100,200,400]; console.log(arr.constructor); var fn = function(){ } console.log(fn.constructor); var str = "hello"; console.log(str.constructor); var num = 100; console.log(num.constructor); var b = true; console.log(b.constructor); var box = document.getElementById("box"); console.log(box.constructor); function demo(){ console.log(arguments.constructor); } demo(); console.log(obj instanceof Object);//true console.log(arr instanceof Array);//true console.log(arr instanceof Object);//true console.log(num instanceof Object);//false </script> </body> </html> -
运行截图为：
3.自定义构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义构造函数</title>
</head>
<body>
<script>
//定义构造函数
function Table(width, height){
this.width = width;
this.height = height;
this.zuoRen = function(){
console.log("我能做人");
}
}
var t1 = new Table(100,400);
var t2 = new Table(600,400);
console.log(t1);
console.log(t2);
t1.zuoRen();
t1.width=500;
console.log(t1.width);
</script>
</body>
</html>
- 运行截图：
三、原型
1.什么是原型
- 每一个JavaScript对象都和另一个对象相关联, 并从另一个对象继承属性,另一个对象就是"原型"
- 用直接量创建的对象 都具有同一个原型对象 Object.prototype
- 每一个对象都有原型
- 原型仍然是一个对象
- 模拟实现面向对象的继承性
2.原型链
- 对象的原型也有原型,构成了原型链
- 对象除了可以使用自有属性还可以继承原型上的属性
3.获取原型
对象.prototype对象.__proto__
4.给原型添加属性或方法
-
原型本身就是对象，同操作对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型</title> </head> <body> <script> var list = []; console.log(Array.prototype); console.log(list.__proto__); Number.prototype.add = function(number){ return number + this; } var num = 100; console.log(num.add(500)); console.log(18.9.add(50)); console.log(200..add(50)); console.log((200).add(50)); console.log(200.0.add(50)); </script> </body> </html> -
运行结果为：
5.判断属性是自有的还是原型继承的
-
hasOwnProperty()
console.log(arr.hasOwnProperty("length")); console.log(arr.hasOwnProperty("push"));
6.ECMA5中创建对象并指定对象的原型
-
Object.create();
//ECMA5 var o = Object.create(arr); console.log(o); console.log(o.constructor); console.log(o.__proto__);
