初涉JS高级
day1原型及作用
复习之前的JS基础知识
JS数据结构
- 值类型:Undefined NULL Boolean Number String
- 引用类型:Object Array Date RegExp Function
- 基本包装类型:Boolean Number String
- 单体内置对象:Global Math
类型检测
- typeof(判断变量类型)
- instanceof(判断对象类型)
- Object.prototype.tostring.call()
“一次性函数”—声明的时候直接调用了
函数的自调用—自调用的函数1
2
3(function (){
console.log("函数自调用");
})();/如何把局部变量变成全局变量?
把局部变量给window就可以了///通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象 方法产生随机数
1
2
3
4
5
6
7
8
9
10
11
12
13
14(function (window){
//产生随机数的构造函数
function Random(){
}
//在原型对象中添加方法
Random.prototype.getRandom = function (min,max) {
return Math.floor(Math.random()*(max-min)+min);
};//把Random对象暴露给顶级对象window--->外部可以直接使用这个对象
window.Random=Random;
})(window);
var rm = new Random();
console.log(rm.getRandom(0,5));
2. 面向对象和面向过程思想
1. 对JS的理解
* JS最初目的就是解决用户和服务器交互问题,到现在可以做游戏 特效 移动端 服务端
* JS不是一门面向对象语言,是机遇对象的语言
* 特性:封装(包装)、继承(由可继承构造器即构造方法---基于原型的)、多态(JS不用体现)、抽象
对象创建的三种方式
字面量的方式
调用系统函数
自定义构造函数方式引出与工厂模式的区别:
函数名是小写,内有new,有返回值,new之后对象是当前对象直接调用函数创建对象自定义:
1
2
3
4
5
6
7
8
9
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.play = function(){
console.log("天天打游戏");
};
}
工厂模式:
1
2
3
4
5
6
7
8
9
10
function creatObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayhi = function(){
console.log("你好");
};
return obj;
}
1. 构造函数与实例对象关系
`console.dir(per);` //把这个对象结构显示出来 constructer在prototype中
总结:
* 实例对象通过构造函数创建
* 如何判断对象是不是该数据类型
* 通过判断构造器方式实例对象.构造器==构造函数名
* 对象 instanceof 构造函数名(一般用这种)
原型的引入、作用及写法(重点)
引入:
实例对象中有个属性,proto,也是对象,叫原型,不是标准的属性(不兼容),浏览器使用的
构造函数有个属性,prototype,也是对象,叫原型,是标准属性,程序员使用
作用:通过原型来添加方法实现数据共享,节省内存空间
写法:例如
ChangeStyle.prototype.init=function(){};
原型的简单语法
加上原型对象后三者之间的关系:
构造函数可以实例化对象
构造函数有一个属性叫prototype,是构造函数的原型对象
构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象(proto)指向的是该构造函数的原型对象
构造函数的原型对象中的方法是可以被实例对象直接访问的
//原型简单语法
1
2
3
4
5
6
7
8
9Student.prototype = {
//手动修改构造器的指向
constructor: Student,
height: "188",
weight: "55kg",
study: function(){},
eat: function(){}
};实例对象的方法是可以相互调用的,原型中添加的方法也是是可以相互访问的例如:
1
2
3
4
5
6
7
8
Animal.prototype.eat=function (){
console.log("动物吃东西");
this.play();
};
Animal.prototype.play=function (){
console.log("玩球");
};
1
2
3
4
5
6
7
/*
实例对象使用的属性或者方法,先在实例中查找并使用,找不到则去实例对象的__proto__指向的原型对象prototype中找(去创建该实例对象的构造函数的原型对象中找),找到了则使用,否则报错
*/
//为内置对象添加原型方法
//为String内置对象的原型对象中添加方法
String.prototype.myReverse=function (){
for(var i=this.length-1;i--){
console.log(this[i]);
}
};
var str = "abcdefg";
str.myReverse();
1
2
6. 随机食物的产生
<!DOCTYPE html>
1 | <!-- JS查漏补缺 |