1.对象 2.工厂函数 3.构造函数 4.prototype 5.对象三角关系 6.Function函数 7. Object函数 8.函数关系 9.原型链 10.js封装性 11.bind-call-apply继承 12.js继承 13.es6类和对象 14.es6继承 15.获取对象类型 16.判断对象的属性 17.对象增删查改 18.对象遍历 19.解构赋值在函数的参数的应用 20.深拷贝和浅拷贝 21.数组高级api 22.数组排序 23.字符串常用的方法 24.基本数据类型和基本包装类型 25.三大对象 26.内置对象Math
1.对象
- 具有属性和行为
- 创建对象
- let obj = new Object();
- let obj = {};
- 函数和方法的区别
方法是和其它的类绑定在一起的函数
函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用
函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象
2.工厂函数
- 工厂函数是专门用于创建对象的函数
function createPerson(myName, myAge) {
let obj = new Object();
obj.name = myName;
obj.age = myAge;
obj.say = function () {
console.log("hello world");
}
return obj;
}
let obj1 = createPerson("lnj", 34);
let obj2 = createPerson("zs", 44);
3.构造函数
- 定义
构造函数和工厂函数一样, 都是专门用于创建对象的
构造函数本质上是工厂函数的简写 - 构造函数和工厂函数的区别
构造函数的函数名称首字母必须大写
构造函数只能够通过new来调用
function Person(myName, myAge) {
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age = myAge;
this.say = function () {
console.log("hello world");
}
// return this; // 系统自动添加的
}
/*
1.当我们new Person("lnj", 34);系统做了什么事情
1.1会在构造函数中自动创建一个对象
1.2会自动将刚才创建的对象赋值给this
1.3会在构造函数的最后自动添加return this;
*/
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
- 构造函数优化
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
this.say = function () {
console.log("hello world");
}
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
// 由于两个对象中的say方法的实现都是一样的, 但是保存到了不同的存储空间中
// 所以有性能问题
// 通过三个等号来判断两个函数名称, 表示判断两个函数是否都存储在同一块内存中
console.log(obj1.say === obj2.say); // false
优化上
function mySay() {
console.log("hello world");
}
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
this.say = mySay;
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
console.log(obj1.say === obj2.say); // true
/*
1.当前这种方式解决之后存在的弊端
1.1阅读性降低了
1.2污染了全局的命名空间
*/
优化下
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
Person.prototype = {
say: function () {
console.log("hello world");
}
}
let obj1 = new Person("lnj", 34);
obj1.say();
let obj2 = new Person("zs", 44);
obj2.say();
console.log(obj1.say === obj2.say); // true
4.prototype
- 特点
存储在prototype中的方法可以被对应构造函数创建出来的所有对象共享
prototype如果出现了和构造函数中同名的属性或者方法, 对象在访问的时候, 访问到的是构造函中的数据（同名时，构造函数会覆盖原型对象） - 应用场景
prototype中一般情况下用于存储所有对象都相同的一些属性以及方法
对象特有的属性或者方法, 我们会存储到构造函数中
5.对象三角关系
- 特点
每个"构造函数"中都有一个默认的属性, 叫做prototype，prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
每个"原型对象"中都有一个默认的属性, 叫做constructor，constructor指向当前原型对象对应的那个"构造函数"
通过构造函数创建出来的对象我们称之为"实例对象"，每个"实例对象"中都有一个默认的属性, 叫做__ proto ， proto __指向创建它的那个构造函数的"原型对象"
对象的三角恋关系.png
6.Function函数
- 函数是引用类型(对象类型)，所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象
- 只要是"函数"就有prototype属性
- 只要是"原型对象"就有constructor属性
- Person构造函数是Function构造函数的实例对象, 所以也有__ proto__属性，Person构造函数的__ proto__属性指向"Function原型对象"
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
console.log(Function === Function.prototype.constructor); // true 证明Function是函数
console.log(Person.__proto__ === Function.prototype); // true 证明Person是Function的实例对象
7.Object函数
- 函数是对象
- 只要是对象就有proto属性
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
console.log(Object.prototype.constructor === Object); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Object.prototype.__proto__); // null
8.函数关系
1.所有的构造函数都有一个prototype属性, 所有prototype属性都指向自己的原型对象
2,所有的原型对象都有一个constructor属性, 所有constructor属性都指向自己的构造函数
3.所有函数都是Function构造函数的实例对象
4.所有函数都是对象, 包括Function构造函数
5.所有对象都有__proto__属性
6.普通对象的__proto__属性指向创建它的那个构造函数对应的"原型对象"
7.所有对象的__proto__属性最终都会指向"Object原型对象"
8."Object原型对象"的__proto__属性指向NULL
函数关系.png
9.原型链
- 对象中proto组成的链条我们称之为原型链
- 对象在查找属性和方法的时候，会在原型链上查找，就近原则
10.js封装性
- 局部变量和局部函数
只要定义一个函数就会开启一个新的作用域
只要在这个新的作用域中, 通过let/var定义的变量就是局部变量
只要在这个新的作用域中, 定义的函数就是局部函数 - 外界不能直接访问的变量和函数就是私有变量和私有函数
- 封装性
封装性就是隐藏实现细节，仅对外公开接口
function Person() {
this.name = "lnj";
// this.age = 34;
let age = 34;
this.setAge = function (myAge) {
if(myAge >= 0){
age = myAge;
}
}
this.getAge = function () {
return age;
}
this.say = function () {
console.log("hello world");
}
}
let obj = new Person();
// 结论: 默认情况下对象的属性和方法都是公开的, 只要拿到对象就可以操作对象的属性和方法
// console.log(obj.name);
// obj.age = -3;
// console.log(obj.age);
// obj.say();
// console.log(age);
obj.setAge(-3);
console.log(obj.getAge());
/*
// 注意点:
// 在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性
// 由于私有属性的本质就是一个局部变量, 并不是真正的属性, 所以如果通过 对象.xxx的方式是找不到私有属性的, 所以会给当前对象新增一个不存在的属性
*/
// 2.操作的是公有属性
obj.age = -3;
console.log(obj.age);
11.bind-call-apply
- 修改函数this的指向
- bind返回一个修改后的函数
- call、apply直接调用修改后的函数
- bind、call直接传参，apply通过数组的方式传参
- 第一个参数为this的指向
let obj = {
name: "zs"
}
function test(a, b) {
console.log(a, b);
console.log(this);
}
let fn = test.bind(obj, 10, 20);
fn();
test.call(obj, 10, 20);
test.apply(obj, [10, 20]);
12.js继承
- 在子类的构造函数通过call借助父类的构造函数，将子类的原型对象修改为父类的实例对象
- 只将子类的原型对象修改为父类的实例对象，不能创建实例时传参
- 只在子类的构造函数通过call借助父类的构造函数，不能继承父类原型的属性和方法
- 将子类的原型对象修改为父类的原型对象，子类原型属性改变父类也会跟着改变
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
}
Person.prototype.say = function () {
console.log(this.name, this.age);
}
function Student(myName, myAge, myScore) {
Person.call(this, myName, myAge);
this.score = myScore;
this.study = function () {
console.log("day day up");
}
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.run = function(){
console.log("run");
}
let stu = new Student("ww", 19, 99);
console.log(stu.score);
stu.say();
stu.study();
13.es6类和对象
- 实例属性写在constructor里面
- 实例方法写在constructor外面，相当于写在prototype中
- 关键字static可以定义静态方法，不能定义静态属性，静态属性跟es6之前的写法一样
- 通过class定义的类，不能自定义这个类的原型对象
//constructor为构造函数
class Person{
constructor(myName, myAge){
//实例属性
this.name = myName;
this.age = myAge;
this.hi = function () {
console.log("hi");
}
}
//实例方法，相当于es6之前的原型对象
run(){
console.log("run");
}
// 静态方法
// 在ES标准中static只支持定义静态方法不支持定义静态变量
static run() {
console.log("run");
}
//静态属性，跟es6之前一样的写法
Person.num = 666;
//在原型上动态添加
Person.prototype.type = "人";
Person.prototype.say = function () {
console.log(this.name, this.age);
};
let obj = {
constructor: Person,
type: "人",
say: function () {
console.log(this.name, this.age);
}
};
//通过class定义类，不能自定义这个类的原型对象
Person.prototype = obj;
let p = new Person("lnj", 34);
console.log(p);
console.log(Person.prototype);
//如果通过class定义类, 那么不能自定义这个类的原型对象
//如果想将属性和方法保存到原型中, 只能动态给原型对象添加属性和方法
14.es6继承
- extends声明继承父类、super（）借助父类构造函数
class Person{
constructor(myName, myAge){
this.name = myName;
this.age = myAge;
}
say(){
console.log(this.name, this.age);
}
}
class Student extends Person{
constructor(myName, myAge, myScore){
// 1.在子类中通过call/apply方法借助父类的构造函数
// Person.call(this, myName, myAge);
super(myName, myAge);
this.score = myScore;
}
study(){
console.log("day day up");
}
}
let stu = new Student("zs", 18, 98);
stu.say();
15.获取对象类型
- 通过constructor.name获取对象类型
- typeof和constructor.name的区别
let obj = new Object(); //object
let arr = new Array(); // Array
let p = new Person(); // Person
let p = new Person();
// console.log(typeof p); // object
console.log(p.constructor.name); // Person
16.判断对象的属性
- in
"name" in obj 在类和原型对象中查找 - hasOwnProperty()
obj.hasOwnProperty("name") 在类中查找
17.对象增删查改
- 对象的属性两张写法
obj.key
obj['key'] - obj.key = value 要是没有这个属性就是增加，有就修改
- delete obj.key 删除属性和方法
18.对象遍历
- for（let key in obj）{
} - 在原型上的属性不能取出来
class Person{
constructor(myName, myAge){
this.name = myName;
this.age = myAge;
}
// 注意点: ES6定义类的格式, 会将方法默认放到原型对象中，在原型上的属性不能取出来
say(){
console.log(this.name, this.age);
}
}
function Person(myName, myAge){
this.name = myName;
this.age = myAge;
this.say = function(){
console.log(this.name, this.age);
}
}
let p = new Person("LNJ", 34);
for(let key in p){
//跳过say函数
if(p[key] instanceof Function){
continue;
}
// console.log(key); // name / age / say
console.log(p[key]); // p["name"] / p["age"] / p["say"]
// 注意点: 以下代码的含义取出p对象中名称叫做key的属性的取值
//p.key这个key是常亮 p[key]这个key是变量
// console.log(p.key); // undefined
}
19.解构赋值在函数的参数的应用
let arr = [1, 3];
function sum([a, b]) {
return a + b;
}
// let res = sum(arr[0], arr[1]);
let res = sum(arr);
let obj = {
name: "lnj",
age: 34
}
function say({name, age}) {
console.log(name, age);
}
// say(obj.name, obj.age);
say(obj);
20.深拷贝和浅拷贝
- 深拷贝：修改拷贝的的值不会影响原来的值，一般为基本数据类型
- 浅拷贝：修改拷贝的的值会影响原来的值 ，一般为引用数据类型
- 对象深拷贝
//对象里面的属性为基本数据类型
class Person{
name = "lnj";
age = 34;
}
let p1 = new Person();
// 浅拷贝
let p2 = p1;
p2.name = "zs"; // 修改变量的值
// 深拷贝
let p2 = new Object();
p2.name = p1.name;
p2.age = p1.age;
p2.name = "zs";
//
for(let key in p1){
p2[key] = p1[key];
}
console.log(p2);
p2.name = "zs";
//
// assign方法可以将第二个参数的对象的属性和方法拷贝到第一个参数的对象中
Object.assign(p2, p1);
// console.log(p2);
p2.name = "zs";
console.log(p1.name);
console.log(p2.name);
// 注意点: 只有被拷贝对象中所有属性都是基本数据类型, 以上代码才是深拷贝
对象里面的属性有引用数据类型
function depCopy1(target, source) {
for (let key in source) {
let sourceValue = source[key];
if (sourceValue instanceof Object) {
let subTarget = new sourceValue.constructor();
target[key] = subTarget;
depCopy1(subTarget, sourceValue);
} else {
target[key] = sourceValue;
}
}
}
let obj1 = {
name: {
name1: "aa",
name2: "bb",
},
scores: [10, 20, 30],
age: 18,
};
let obj2 = {};
depCopy1(obj2, obj1);
obj2.name.name1 = "ccc";
console.log(obj1);
console.log(obj2);
/* 遍历源对象所有的属性，判断是否为引用数据类型，
否，就将值赋值给目标对象相应的属性，
是，根据对象的类型创建对象或者数组，
赋值给目标对象的属性，
调用该方法，直到没有引用类型为止
*/
21.数组高级api
- ES6中推出的for of循环来遍历数组
不推荐使用for in循环来遍历数组，for in循环就是专门用于遍历无序的
for (let value of arr){}
for (let key in obj){} - forEach()
array.forEach(function(currentValue, index, arr), thisValue)
实现原理
Array.prototype.myForEach = function (fn) {
// this === [1, 3, 5, 7, 9]
for(let i = 0; i < this.length; i++){
fn(this[i], i, this);
}
};
arr.myForEach(function (currentValue, currentIndex, currentArray) {
console.log(currentValue, currentIndex, currentArray);
});
- findIndex()
array.findIndex(function(currentValue, index, arr), thisValue)
返回满足条件的第一个元素的索引，没有返回 -1
实现原理
Array.prototype.findIndex1 = function (fn) {
for (let i = 0; i < this.length; i++) {
let result = fn(this[i], i, this);
if (result) {
return i;
}
}
return -1
};
- filter()
array.filter(function(currentValue,index,arr), thisValue)
返回满足条件的数组，没有就返回空数组
实现原理
Array.prototype.filter1 = function (fn) {
let newArray = [];
for (let i = 0; i < this.length; i++) {
let result = fn(this[i], i, this);
if (result) {
newArray.push(this[i]);
}
}
return newArray;
};
- map()
array.map(function(currentValue,index,arr), thisValue)
返回满足条件处理过后元素的数组，不满足条件的元素undefined填充
实现原理
Array.prototype.map1 = function (fn) {
let arr = new Array(this.length);
arr.fill(undefined);
for (let i = 0; i < this.length; i++) {
let result = fn(this[i], i, this);
if (result) {
arr[i] = result;
}
}
return arr;
};
22.数组排序
- arr.sort(function(a,b){
})
//a-b 升序 b-a 降序
let arr1 = [1,3,2]
arr1.sort(function (a,b) {
return b-a
})
console.log(arr1);
//数组中的对象也可以利用这一性质
let students = [
{name: "zs", age: 34},
{name: "ls", age: 18},
{name: "ww", age: 22},
{name: "mm", age: 28},
];
students.sort(function (o1, o2) {
// return o1.age - o2.age;
return o2.age - o1.age;
});
console.log(students);
23.字符串常用的方法
- 获取字符串的长度：str.length
- 通过索引获取字符串的str[index]或者str.charAt(index)
- 字符串查找indexOf()、lastIndexOf()、includes()
- 字符串拼接 concat()、+
- 字符串截取slice()、substring()、substr()
string.slice(start,end) 不包括end
string.substring(from, to) 不包括to
string.substr(start,length) - 字符串切割split()
- 判断指定字符串开头或者结束 startsWith()、endsWith()
- 字符串模板
24.基本数据类型和基本包装类型
- 通过字面量创建的基本数据类型的数据都是常量
- 基本数据类型没有属性和方法
- 之所以能够访问基本数据类型的属性和方法, 是因为在运行的时候系统自动将基本数据类型包装成了对象类型
25.三大对象
- JavaScript中提供三种自带的对象, 分别是"本地对象"/"内置对象"/"宿主对象"
- 本地对象和内置对象，无论在浏览器还是服务器中都有的对象
- 宿主对象
对于嵌入到网页中的JS来说，其宿主对象就是浏览器, 所以宿主对象就是浏览器提供的对象
包含: Window和Document等。
所有的DOM和BOM对象都属于宿主对象。
26.内置对象Math
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入
Math.abs() 绝对值
Math.random() 生成随机数
Math.random()会成一个0~1的随机数，不包括1
// 需求: 要求生成一个1~10的随机数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
let value = getRandomIntInclusive(1, 10);
console.log(value);