1万字,阿珊学习笔记《前端基础知识》小白入门导读(建议收藏)
Posted 不吃西红柿丶
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1万字,阿珊学习笔记《前端基础知识》小白入门导读(建议收藏)相关的知识,希望对你有一定的参考价值。
🍅 作者:阿珊
🍅 作者简介:95后前端小姐姐,蓝桥签约作者,欢迎点赞、收藏、评论
🍅 粉丝专属福利:知识体系、面试题库、技术互助、简历模板。文末公众号领取
🍅 包邮送书(每周1-2次):关注公众号「信息技术智库」回复「送书」
手头紧、时间紧、衣服紧、眉头紧 ,这就是传说中的前程四紧吧~
本JS基础笔记系列一共有六篇相关的推文
本篇是第四篇:JS面向过程以及对象
这是笔者很早之前跟着视频学JS记录下来的笔记哦~
希望对你有所启发~
目录
01 编程思想
编程思想:把一些生活中做事的经验融入到程序中
面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程
面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果
面向对象特性:封装、继承、多态 (抽象性)
js不是面向对象的语言,但是可以模拟面向对象的思想
js是一门基于对象的语言:万物皆对象
什么是对象?有特征和行为,具体特指的某一个事物
02 创建对象
1.调用系统的构造函数创建对象
var 变量名= new Object();
//实例化对象
var obj = new Object();
//对象有特征---属性和行为---方法
//添加属性-----如何添加属性? 对象.名字=值;
obj.name = "阿珊";
obj.age = 18;
obj.sex = "女";
//添加方法----如何添加方法? 对象.名字=函数;
obj.eat = function () {
console.log("我喜欢吃油炸榴莲凉拌臭豆腐和大蒜");
};
obj.play = function () {
console.log("我喜欢玩飞机模型");
};
obj.cook = function () {
console.log("切菜");
console.log("洗菜");
console.log("把菜放进去");
console.log("大火5分钟");
console.log("出锅");
console.log("凉水过一下");
console.log("放料,吃");
};
console.log(obj.name);//获取--输出了
console.log(obj.age);
console.log(obj.sex);
//方法的调用
obj.eat();
obj.play();
obj.cook();
var smallDog=new Object();
smallDog.name="大黄";
smallDog.age=3;
smallDog.color="黄色";
smallDog.weight="250";
smallDog.eat=function () {
console.log("我要吃大骨头");
};
smallDog.walk=function () {
console.log("走一步摇尾巴");
};
smallDog.eat();//方法的调用
smallDog.walk();
var phone=new Object();
phone.size="iphone8";
phone.color="黑色";
phone.call=function () {
console.log("打电话");
};
phone.sendMessage=function () {
console.log("你干啥捏,我烧锅炉呢");
};
phone.call();
phone.sendMessage();
2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
3.字面量的方式创建对象
03 工厂模式常见对象
如何获取该变量(对象)是不是属于什么类型的?
语法:
变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型
在当前的对象的方法中,可以使用this关键字代表当前的对象
var person=new Object();
person.name="小白";
person.age=10;
person.sayHi=function () {
//在当前这个对象的方法中是可以访问当前这个对象的属性的值
console.log("您好,吃了没您,我叫:"+this.name);
};
//学生的对象
var stu=new Object();
stu.name="小芳";
stu.age=18;
stu.study=function () {
console.log("学习,敲代码,今天作业四遍,我今年"+this.age+"岁了");
};
//小狗的对象
var dog=new Object();
dog.name="哮天犬";
dog.say=function () {
console.log("汪汪...我是哮天犬");
};
//输出人是不是人的类型
console.log(person instanceof Object);
console.log(stu instanceof Object);
console.log(dog instanceof Object);
//对象不能分辨出到底是属于什么类型?
//如何一次性创建多个对象?把创建对象的代码封装在一个函数中
//工厂模式创建对象
function createObject(name,age) {
var obj = new Object();//创建对象
//添加属性
obj.name = name;
obj.age = age;
//添加方法
obj.sayHi = function () {
console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
};
return obj;
}
//创建人的对象
var per1 = createObject("小芳",20);
per1.sayHi();
//创建一个人的对象
var per2 = createObject("小红",30);
per2.sayHi();
04 自定义构造函数创建对象
自定义构造函数创建对象,自己定义一个构造函数,自定义构造函数,创建对象
函数和构造函数的区别:名字是不是大写(首字母是大写)
function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("我叫:"+this.name+",年龄是:"+this.age);
};
}
//自定义构造函数创建对象:先自定义一个构造函数,创建对象
var obj=new Person("小明",10);
console.log(obj.name);
console.log(obj.age);
obj.sayHi();
var obj2=new Person("小红",20);
console.log(obj2.name);
console.log(obj2.age);
obj2.sayHi();
console.log(obj instanceof Person);
console.log(obj2 instanceof Person);
//自定义狗的构造函数,创建对象
function Dog(name,age,sex) {
this.name=name;
this.age=age;
this.sex=sex;
}
var dog=new Dog("大黄",20,"男");
console.log(dog instanceof Person);//false
console.log(dog instanceof Dog);
自定义构造函数创建对象主要做了一下几件事:
-
在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象
-
把this设置为当前的对象
-
设置对象的属性和方法的值
-
把this这个对象返回
function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("我叫:"+this.name+",年龄是:"+this.age);
};
}
//创建对象
var obj=new Person("小明",10);
console.log(obj.name);
console.log(obj.age);
obj.sayHi();
05 创建对象的图解
1 调用构造函数创建对象
var obj=new Object();
2.自定义构造函数创建对象
function Person(name,age) {
this.name=name;
this.age=age;
this.sayHi=function () {
console.log("您好,我叫:"+this.name);
};
}
创建对象----实例化一个对象,并初始化
var per=new Person("小明",20);
per.name="张三";
06 字面量的方式创建对象
var obj={};
obj.name="小白";
obj.age=10;
obj.sayHi=function () {
console.log("我是:"+this.name);
};
obj.sayHi();
var obj2={
name:"小明",
age:20,
sayHi:function () {
console.log("我是:"+this.name);
},
eat:function () {
console.log("吃了");
}
};
obj2.sayHi();
obj2.eat();
字面量创建对象的缺陷: 一次性的对象
var obj={
name:"小明",
age:38,
sex:"女"
};
obj.name="小三";
console.log(obj.name);
点语法: 对象.名字=值; 对象.名字=函数;
点,就完事了
注意:
-
代码(变量)只有执行到这个位置的时候,才知道这个变量中到底存储的是什么,如果是对象,就有对象的属性和方法,如果是变量就是变量的作用
-
对象没有什么,只要点了,通过点语法,那么就可以为对象添加属性或者方法
var obj = {};//空对象
obj.name = "看名字";
obj.age = 10;
obj.fly = function () {
console.log("飞吧");
};
设置和获取属性的另一种写法
function Person(name,age) {
this.name=name;
this.age=age;
this.play=function () {
console.log("喜欢玩游戏");
};
}
var obj=new Person("卡卡西",20);
//obj.name="佐助";
obj["name"]="佐助";
console.log(obj["name"]);
obj.play();
obj["play"]();
console.log(obj.name);
console.log(obj.age);
obj.play();
07 JSON格式的数据
对象:有属性和方法,特指的某个事物
对象:一组无序属性的集合的键值对,属性的值可以是任意的类型
function Dog(name) {
this.name=name;
}
function Person(name,age) {
this.age=age;
this.name=name;
this.sex=true;
this.dog={};
this.play=function () {
console.log("喜欢玩游戏");
};
}
var sex=false;//男
console.log(sex?"男":"女");
var sex=true;//男
console.log(sex?"男":"女")
JSON格式的数据:一般都是成对的,是键值对
json也是一个对象,数据都是成对的,一般json格式的数据无论是键还是值都是用双引号括起来
var obj={
name:"小明"
};
var json = {
"name": "小明",
"age": "10",
"sex": "男"
};
遍历对象,是不能通过for循环遍历,无序
key是一个变量,这个变量中存储的是该对象的所有的属性的名字
for (var key in json) {
console.log(key + "===========" + json[key]);
}
var key="name";
console.log(json[key]);
// 可以通过for-in循环
for(var key in json){
//console.log(key);//json对象中的属性的名字
console.log(json[key]);
}
// 对象中确实有这个属性对象.属性名字 或者对象[属性名字]
//一个一个的遍历出来
var arr=[10,20,30];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
08 简单类型和复杂类型
原始数据类型:number,string,boolean,undefined, null,object
基本类型(简单类型),值类型: number,string,boolean
复杂类型(引用类型):object
空类型:undefined:null
值类型的值在哪一块空间中存储? 栈中存储
引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储
var num=10;//值类型,值在栈上
var obj={};//复杂类型,对象在堆,地址(引用)在栈
值类型之间传递,传递的是值
引用类型之间传递,传递的是地址(引用)
值类型作为函数的参数,传递的是值
引用类型作为函数的参数,传递的是地址
var num=10;
var num2=num;//传递的值
function f1(x) {
x=100;
}
var num=10;
f1(num);
console.log(num);//
var obj={
name:"小明"
};
function f2(obj2) {
obj2.name="小红";
}
console.log(obj.name);//
f2(obj);
console.log(obj.name);//
09 内置对象
1.内置对象----js系统自带的对象
-
Math
-
Date
-
String
-
Array
-
Object
//如何验证变量是不是对象
console.log(Array instanceof Object);
var obj={};
console.log(obj instanceof Object);
Math.PI----π---
Math.E----常数的底数
Math.abs(值)-----绝对值
Math.ceil(值)----向上取整
Math.floor(值)---向下取整
console.log(Math.PI);
console.log(Math.E);
console.log(Math.abs(-2));
console.log(Math.ceil(2.77));
console.log(Math.floor(2.77));
console.log(Math.fround(2.77));
console.log(Math.max(2,2,88,5,3,44,777));
console.log(Math.min(2,2,88,5,3,44,777));
console.log(Math.pow(2,4));//16
console.log(Math.sqrt(2,4));//16
console.log(Math.random());//16
2.自定义对象—自己定义的构造函数创建的对象
3.浏览器对象—BOM
添加公众号「信息技术智库」:
🍅 硬核资料:20G,8大类资料,关注即可领取(PPT模板、简历模板、技术资料)
🍅 技术互助:技术群大佬指点迷津,你的问题可能不是问题,求资源在群里喊一声。
🍅 面试题库:由各个技术群小伙伴们共同投稿,热乎的大厂面试真题,持续更新中。
🍅 知识体系:含编程语言、算法、大数据生态圈组件(mysql、Hive、Spark、Flink)、数据仓库、前端等。
👇👇送书抽奖丨技术互助丨粉丝福利👇👇
以上是关于1万字,阿珊学习笔记《前端基础知识》小白入门导读(建议收藏)的主要内容,如果未能解决你的问题,请参考以下文章
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
历时三个月,少说有三十多万字的《从零开始学习Java设计模式》小白零基础设计模式入门导读(强烈建议收藏)