博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端零基础 JS 教学 第五天 05 - 对象,构造函数,内置对象,基本数据类型和复杂类型...
阅读量:7223 次
发布时间:2019-06-29

本文共 7743 字,大约阅读时间需要 25 分钟。

复习第四天的:

声明变量并给值初始化变量 重点记住

1、函数的返回值 return  	function fn(){		return  666 	}	console.log(fn);//输出的是整个 function 	console.log(fn()); fn()调用函数 666 	function fun(){		}	console.log(fun()) 没有return 返回undefined   	 	function demo(x){	 	} 	demo(1); 	demo(1,2); x 等于1  2 就是 undefined  	 // arguments 争吵  	 function fn(){		console.log(arguments); //arguments是伪数组外形上是数组[]也有索引号 		//有很多数组的方法它没有所以不是,纯真的数组  	 } 	 fn(); 	 fn(1,2,3,4);2、定义函数的两种方式	答: 1、声明函数,function fn(){}   		2、函数表达式,var fn = function(){}  API里面大量使用 3、自执行函数	答:函数不调用函数不执行 		自执行 函数 (function(){})()  // 小闭包 4、函数也是一种数据类型	答:function fn(){}  		console.log(fn) //这里会把函数体打印出来 如果用 type of  就会发现是 function5、函数可以作为参数传递 	答:function fn(){		console.log('我是一个函数式');	}	console.log(fn);	//声明函数 		function fun(x){  //x是形参		其实是等于  x = functin (){			console.log('我是一个函数式');		}			console.log(x);			所有就用 x();  函数作为参数使用		}		//调用函数 1、实参		fun(1);		fun(fn);6、函数可以作为返回值	function fun(){		return function(){			console.log('函数可以作为返回值');		}	};	var fn = fun();	var fn = function (){};  //函数表达式 	fn();7、全局局部变量    	var num = 10;	//全局变量	function fn(){ 		vat str = ''; //局部变量 		num = 20; //全局变量	}	console.log(str);		这两个var 声明的是两个不同形式的变量 		var  a = b = c=9;  答:var a = 9是局部的 b,c是全局的	var a = 9,		b = 9,		c = 9,	答: 这里的a,b,c 都是局部的 复制代码

今日学习目标

理解:	1、构造函数与对象实例的关系	2、对象实例的属性和方法	3、值类型和引用类型内存分配	4、对象字面量	5、new 和this 关键字1、对象 object 	答:js是基于对象的,也叫做伪面向对象,现实生活中,万物皆对象,对象是一个具体的事物,看得见摸得着实物,一本书,一辆汽车是对象复制代码

对象 *** 重要 ***

// 函数封装了一组代码在里面 // 对象封装了一组属性和方法复制代码

1、对象字面量的方式来创建

// 对象的创建两种方法答第一种:var obj = {};  //1、对象字面量 方式 创建对象 答第二种:var obj = new Object(); //使用new 进行创建 		var obj = {    name:'张三',    age :18,  //这里技术使用逗号隔开,最后一个不用加逗号    sex :'男',    sayHi:function(){  //方法     // 因为这个函数在对象里面所以叫方法        alert('你好吗?');    }}	// 对象的使用	// 使用对象属性, 对象名.属性 .是的的意思 	console.log(obj.name);	console.log(obj.age);	// 调用对象方法,对象名.方法名();	obj.sayHi();	    有用用处比较大 	// 对象名['属性名'] 另外一种属性调用的方法	console.log(obj["age"]);复制代码

2、使用new Object 的方式来创建对象

var obj = new Object(); //为什么使用小括号跟构造函数有关,声明了一个对象 未给值跟我们前面学的 new Array()一样 Object()是构造函数 第一个字母大写new Object() 是调用构造函数, 因为构造函数需要new 来调用,同时再内存中创建一个对象 	var  obj = new Object();obj.name = '李四';obj.age = 18;
obj.sayHi = function(){ alert('嘎嘎 你好吗');}// 同上 console.log(obj.name);console.log(obj['age']); //这里记住使用的 引号包裹起来的 obj.sayHi();复制代码

自定义构造函数 构造函数是泛指 某一大类

答:我们这个构造函数里面封装的对象,为了和以前区别显示不同,我们称为构造函数为了显示构造函数的不同,第一个字母要大写 	构造函数,是一种特殊的函数,主要用来在创建对象初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中构造函数是泛指的某一个事物的大类 :重点 注意:        1、构造函数用于创建一类对象,首字母要大写 	2、构造函数要和new 一起使用才有意义 	3、使用的是帕斯卡命名吗 new  Array  new Object  A 跟 O都是 帕斯卡命名法  	 // 构造函数可以批量 生成 重复使用对象  构造函数首字母大写, 	// 1、构造函数创建 注意:首字母大写 	// 2、里面的属性和方法 前面必须加 this 当前自己  	function Person(name,age,sex){ 		// 批量生成,接收参数,目前来看就是之前的函数,首字母大写 		// 这时候 发现了this 自己的  		this.name = name; 		this.age  = age; 		this.sex  = sex; 		this.sayHi = function(){ 			alert('你好吗'); 		} 	} 	//调用构造函数  	// new 会初始化里面的内容  	// 构造函数无需返回值 	var p1 =  new Person('张三',18,'男'); 	console.log(p1.name); 	 	 	第二道题目:构造函数  	    	//这个是变量 	var name = 10;	function Pen(siez,age,name){		// 属性 		this.siez = siez;		this.age = age;		this.name = name;		this.sayHi = function(){			alert('在函数里面是方法,在外面是函数')		}	}	var p1 = new Pen('李四',19,'20');	console.log(p1.siez);	构造函数基本使用:    function Yingxiong(name,type,blood){		this.name  = name;		this.type  = type;		this.blood = blood;		this.attack = function(){			alert('攻击');		}	}	这里使用 new 进行调用这里是特指了盘古  	var p1 = new Yingxiong('盘古','肉','1000'); 	console.log(p1.name); 	console.log(p1['type']); 	p1.attack();复制代码

new 关键字

function Student(name,age){		this.name = name;		this.age = age;		this.sayHi = function (){			alert('hi'+this.name);		}	}	// 调用 new 来调用	var zs = new Student('张三',19);	console.log(zs.name);	// new 关键字 做了 4件事	// 1、 new 关键字首先创建了一个空对象 	// 2、让this 全部指向这个对象 	// 3、执行构造函数里面的代码  完成属性和方法的赋值工作 	// 4、new 里面有这个返回对象 所以我们构造函数里面不需要return  可以返回new 帮我们做了 		解答:    上面的function 是泛指的某个事物的大类 复制代码

this 关键字

js 中的this 指向问题,有时候会让人难以捉摸随着学习的深入,	现在我们需要掌握函数内部的this几个特点		1、函数在定义的时候this是不明确的 只有在调用的时候才可以确定		2、一般函数直接执行,内部this 指向全局window		3、函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象 (谁调用指向谁)		4、构造函数中的this 对象的实例		记住:this 指向了函数的调用者     function fn(){		console.log(this); //window 在普通函数中调用 是window 		// this 指向了window 	}	fn(); 这里其实是window.fn();指向的还是函数的调用者 	如果在对象里面 指向的是 这个对象 就是 对象的调用者 	var obj = {		sayHi:function(){			console.log(this);			// 我声明了一个全局变量 把this 给 that 			that = this;		}		}			obj.sayHi();	// this 是指向 函数的调用者 	console.log(that === obj);	构造函数 :function Person(name){		this.name = name;		console.log(this);		self = this;	}	var p1 = new Person('张三');	console.log(self === p1);  //true   this 指向了 p1	// 谁调用this  this 指向谁 复制代码

总结: 对象

1、函数是封装了一系列的代码 	2、对象封装的是属性 和方法  复杂数据类型 ,本质对象是一组无序的相关属性和方法的集合 	注意:函数用来按照功能封装代码,对象用来按功能封装方法和属性,都起到复用代码和数据的作用 	构造函数:泛指某一大类,比如苹果,不管任何苹果统称为苹果,一般情况下,首字母大写,以和其他函数区分	对象实例:特指一个事物,比如这个苹果,复制代码

遍历对象 重点 !!!

var student = {		name :'张三',		age  :18,		sex  :'男'		// 属性 和值 	};	// 答:如何取出对象里面的属性和值呢?	// 遍历对象 		// 答 遍历对象的属性 我们用for...in 语句用于对数组或者对象的属性进行循环操作 			for( 变量  in  对象名字){		在此 执行代码 	}			// 答:这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或者 key	// 后面的是对象 可以数组 因为数组也属于对象 //数组 也可以使用 for...in 来进行遍历var arr = ['pink','orange','red','yellow'];	for(k in arr){		// 在数组里面 k 代表索引号 		console.log(k);  //这里输出的是 下标 0,1,2,3 是 索引号 		console.log(arr[k]); //arr[k] 代表里面的元素 	}			使用for...in 进行输出 对象 里面的 值 var student = {		name :'张三',		age  :18,		sex  :'男'	};	for(k in student){		console.log(k); //k输出的是对象里面 属性名:就是建 		console.log(student[k]); //这回输出 是 对象的里面 输出的是 属性值  	}复制代码

遍历 Json 格式 重要中的重要 !!!!!*****

重点 *** Json 是一种轻量级的数据交换格式,	1、JSOn 数据的书写格式是: 名称/值对	2、里面的属性和值都要用双引号 括起来	3、我们跟后台交互使用json 来进行交互 		这里是遍历json 后面我们会详细讲解 	Json 跟 对象 很像  但是 名称 和 值都是使用了双引号包裹起来 	var json = {		'id':'1',		'name':'张三',		'age':'18',		'sex':'男'	};	for(k in json){		console.log( k + '----- '+ json[k]); 	}简单类型 和复杂类型 	1、简单类型又叫基本数据类型,或者值类型		简单类型:String Number boolear undefined null 五种基本类型 		简单类型又叫值类型:简单数据类型/基本数据类型,在存储时,变量中存储的是值的本身,因此叫做值类型	2、复杂类型又叫做引用数据类型,		复杂类型:		引用类型:复杂数据类型,在存储中变量中存储的仅仅是地址引用 因此叫做引用数据类型复制代码

堆 和 栈

解答: js 中没有堆栈的概念,我讲解堆栈是为了更好的让大家理解执行 方式 以便学习 	1、栈(操作系统):由操作系统自动分配释放,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈 	2、堆(操作系统):存储复杂类型 对象 一般有程序员分配释放,程序员不放,由垃圾回收机制回收			function Person(name,age){		this.name = name;		this.age = age;	}	var p1 = new Person('张三',19);  //实例化 创建了一个对象 	var p2 = p1;  //复杂数据类型 按地址 传递, 这里是 p1把地址传给了p2	p1.name = 'red';	console.log(p2.name);  //这里的p2打印出来的是 red 因为是按地址传递 复制代码

内置对象

js 中的对象分为三种 内置对象 ,自定义对象 ,浏览器对象	1、内置对象  Math、Array、Number、String、boolean	2、自定义对象 今天上面讲的那个就是 自己定义的 	3、浏览器对象如何 学习一个方法?	1、方法的功能	2、参数的意义和类型	3、返回值意义和类型	4、demo进行测试复制代码

Math 对象 数学对象

Math对象不是构造函数,它具有数学常熟和函数的属性和方法,都是以静态成员的方式提供 Math.PI  //圆周率 Math.floor() //向下取整  1.9 也是 1  Math.ceil() //向上取整 1.1  也是2  Math.round() //四舍五入 注意:-3.5取得是3 就近原则,-3.6则是4 谨记出现负.5取大就近原则 Math.abs()  //绝对值 注意:如果是负数也是 正数 Math.max() Math.min() //求最大和最小值 Math.sin() Math.cos  //正选/余弦 Math.power() Math.sqrt() //求指数次幂, Math.random() //生成随机数复制代码

Math.random()生成随机数 随机数返回一个小数,取值范围[0,1) 左闭右开 0<=x<1 解答:左面0能取到1取不到

我们想要求一个1-10的正数包含(1和10本身)使用Math.random();	// random 取值范围[0,1) 左闭右开 0<=x<1	Math.floor(Math.random() * (max - min + 1) + min);	Math.floor(Math.random() *(10 - 1 + 1) + min);	Math.floor(Math.random() *(10) + min);	Math.floor(Math.random() * 10+ min);	Math.floor([0,1) * 10+ min);	Math.floor([0,10) + min);	Math.floor([1,10.99) + 1); //这里向下取整得到了 10	Math.floor([1,10) + 1);			1、求一个1-10的正数包含(1和10本身)使用Math.random();function getRandon(max,min){这个方法求出 任意整数随机数 	return Math.floor(Math.random() * (max - min + 1) + min);} 	console.log(getRandon(1,10));随机生成颜色的function getRandom(min,max){		return Math.floor(Math.random() * (max - min + 1) + min);	}	function getColor(){		var r,g,b;		r = getRandom(0,255);		g = getRandom(0,255);		b = getRandom(0,255);				return 'rgb('+r+','+g+','+b+')'	}	console.log(getColor());复制代码

这篇文章拖得太久了下次尽量保证写的时候当天可以更新

转载于:https://juejin.im/post/5c73ffd451882524c84f292b

你可能感兴趣的文章
Java定位CPU使用高问题--转载
查看>>
ADO.NET与Oracle(一):获取多行记录集
查看>>
C/C++程序员必须熟练应用的开源项目
查看>>
python 时间及日期函数
查看>>
SMTP 简单邮件传输协议
查看>>
Python实现二叉树的存储和遍历
查看>>
国外人工智能界牛人主页
查看>>
Android 自定义View合集
查看>>
用scikit-learn学习谱聚类
查看>>
zookeeper原理解析-选举
查看>>
OpenStack 计算服务 Nova计算节点部署(八)
查看>>
8 -- 深入使用Spring -- 3...2 ResouceLoader 接口和 ResourceLoaderAware 接口
查看>>
win32下编译glog
查看>>
C#编程(五十二)----------有序列表
查看>>
利用背景流量数据(contexual flow data) 识别TLS加密恶意流量
查看>>
攻防工具
查看>>
获取包下的类名
查看>>
Fluent UDF【7】:解释型UDF
查看>>
cocos2dX 之数据存储
查看>>
Android应用程序安装过程浅析
查看>>