创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建对象
// 1.字面量形式创建
var obj = {
name: "小红",
age: 18
}
// 2.构造函数创建
function Person(name, age) {
this.name = name;
this.age = age;
}
// 实例化
var person1 = new Person("小明", 20);
// 3.Object() 构造器 new Array() new Function()
var obj2 = new Object(); // 空对象
obj2.name = "张三";
obj2.age = "20";
// for...in 遍历对象
// for (var key in obj) {
// console.log(key);
// console.log(obj[key]);
// }
// Object.keys() 该方法会返回一个由一个给定对象的自身可枚举属性组成的数组
console.log(Object.keys(obj));
// in 判断属性是否存在
console.log("hobby" in obj);
// delete 删除属性
// delete obj.name;
// console.log(obj);
// Object.getOwnPropertyNames(obj)
// 该方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。
console.log(Object.getOwnPropertyNames(obj));
</script>
</body>
</html>
属性的特征
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var obj = {
// 数据属性
myname: "小明",
myage: 20,
gender: "男",
sayHi: function () {
console.log("hello");
},
// 访问器属性
get name() {
console.log("获取name");
return this.myname + "11";
},
set setname(value) {
console.log("修改name");
this.myname = value;
}
}
// 通过访问器去访问数据属性
console.log(obj.name);
// 通过访问器去修改数据属性
obj.setname = "小红";
console.log(obj);
</script>
</body>
</html>
定义属性的特征
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 对象中的属性默认可修改、可枚举、可配置
var obj = {
name: "小好",
age: 20
}
var obj2 = {
age: 18,
};
Object.defineProperty(obj2, "name", {
// 1.是否可枚举
enumerable: false,
// 2.是否可修改
writable: false,
// 3.是否可配置
configurable: false,
// 4.属性的值是什么
value: "小谷"
});
console.log(obj2);
console.log(Object.keys(obj2));
// 尝试修改失败
obj2.name = "zhangsan";
console.log(obj2);
delete obj2.name;
console.log(obj2);
for (var key in obj2) {
console.log(key);
}
console.log(Object.getOwnPropertyNames(obj2));
</script>
</body>
</html>
定义多个属性特征
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Object.defineProperty()
// Object.defineProperties()
var obj = {
name: "小好"
}
// 定义多个属性的特征
Object.defineProperties(obj, {
age: {
// 是否可枚举
enumerable: false,
// 是否可修改
writable: true,
// 是否可配置
configurable: false,
// 值
value: 18
},
gender: {
// 是否可枚举
enumerable: false,
// 是否可修改
writable: true,
// 是否可配置
configurable: false,
// 值
value: "男"
},
hobby: {
// 是否可枚举
enumerable: false,
// 是否可修改
writable: true,
// 是否可配置
configurable: false,
// 值
value: "好好玩"
}
})
console.log(obj);
// 获取属性特征信息
console.log(Object.getOwnPropertyDescriptor(obj, "age"));
// 获取属性特征信息
console.log(Object.getOwnPropertyDescriptors(obj));
</script>
</body>
</html>
构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 开启严格模式
// "use strict"
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
var person = new Person("小明", 18, "男");
// 普通函数
function fun(a, b) {
var sum = a + b;
return sum;
}
// 构造函数
// 1.首字母大写
// 2.this指向实例化对象
// 3.没有 return 返回值
// 普通函数
// 1.一般首字母小写
// 2.this指向 window
// 3.可以有 return 返回值
</script>
</body>
</html>
实例成员和静态成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 构造函数
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
// 给构造函数添加静态成员
Person.name2 = "小明";
// 实例化对象
var person1 = new Person("小红", 18, "男"); // 实例成员
console.log(person1);
console.dir(Person);
// 通过实例化对象访问实例成员
console.log(person1.name);
console.log(person1.name2); // 无法得到静态成员
// 通过构造函数访问静态成员
console.log(Person.name2);
console.log(Person.age); // 无法得到实例成员
</script>
</body>
</html>
构造函数的原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
// 默认方法
// this.sayHi = function () {
// console.log("hello");
// }
}
// 将方法写在构造函数的 prototype(原型对象) 上
Person.prototype.sayHi = function () {
console.log("hello");
}
Person.prototype.color = "红色";
// 实例化对象
var person1 = new Person("小红", 20, "男");
console.log(person1);
var person2 = new Person("小明", 21, "男");
console.log(person2);
console.dir(Person);
// 每一个实例化对象都可以访问其构造函数 原型 上的属性和方法
person1.sayHi();
person2.sayHi();
console.log(person1.color);
console.log(person2.color);
// 每一个构造函数都有一个prototype 属性,其属性值为对象,称为原型对象。
// 原型的作用是什么 ? 共享方法, 节约内存。
</script>
</body>
</html>
对象原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.sayHi = function () {
console.log("hello");
}
var person1 = new Person("小红", 20, "男");
console.log(person1);
var person2 = new Person("小明", 20, "男");
console.log(person2);
// 对象原型 __proto__ (浏览器上显示为 [[Prototype]])
// 每一个对象都有一个 __proto__ 属性, 成为 对象原型,指向构造函数的 prototype 原型对象
// 对象身上的 __proto__ 和构造函数上的 prototype 等价的
// __proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,
// 但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype。
person1.__proto__.sayHi();
person1.sayHi();
console.log(person1.__proto__ === Person.prototype);
// 构造函数身上 ---- 原型对象 prototype
// 实例化对象身上 ----- 对象原型 __proto__
</script>
</body>
</html>
constructor构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.sayHi = function () {
console.log("nihao");
}
console.dir(Person);
var person1 = new Person("小红", 20, "男");
console.log(person1);
var person2 = new Person("小明", 21, "男");
console.log(person2);
// constructor 构造函数
console.dir(Person.prototype.constructor);
console.dir(person1.constructor);
</script>
</body>
</html>
原型链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 原型链
// 当访问一个对象的某个属性或方法时,会先在这个对象本身属性上查找,
// 如果没有找到,则会去它的`__proto__`上查找,即它的构造函数的prototype,
// 如果还没有找到就会再在构造函数的prototype的`__proto__`中查找,
// 这样一层一层向上查找就会形成一个链式结构,我们称为原型链.
function Person(name, age, gender) {
// this.name = name;
this.age = age;
this.gender = gender;
}
// Person.prototype.name = "张三";
console.dir(Person);
var person1 = new Person("小明", 20, "男");
console.log(person1.name); // undefined
</script>
</body>
</html>
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.name = "张三";
var person1 = new Person("小明", 20, "男");
var obj = {}
console.log(Person.prototype.hasOwnProperty("name"));
console.log(person1.hasOwnProperty("name"));
console.log(Person.prototype.isPrototypeOf(person1));
console.log(Person.prototype.isPrototypeOf(obj));
</script>
</body>
</html>
原型对象中的this指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.fun = function () {
console.log(this.name + "说:你好!");
}
var person1 = new Person("小明", 20, "男");
person1.fun();
// 构造函数原型中的 this 指向当前实例化对象 原型对象里面的方法也指向实例对象
</script>
</body>
</html>
数组的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1, 2, 3, 1, 3, 3, 3, 5, 6, 6, 7, 9, 1, 2, 5, 6];
console.log(arr);
var arr2 = new Array();
// 扩展数组操作方法
// 数组去重
Array.prototype.filFun = function () {
var newArr = [];
// 构造函数原型上的 this 指向当前实例化对象
for (var i = 0; i < this.length; i++) {
if (!newArr.includes(this[i])) {
newArr.push(this[i]);
}
}
return newArr;
}
console.log(arr.filFun());
// 数组之和
Array.prototype.sumFun = function () {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
console.log(arr.sumFun());
</script>
</body>
</html>