JavaScript分三个部分:
- ECMAScript标准:JS 的基本语法
- DOM:Document Object Model
- BOM:Browser Object Model
JavaScript 是什么
- 解析执行:轻量级解释型的,或是 JIT(即使编译) 编译型的程序设计语言
- 语言特点:动态,头等函数 (First-class Function)
- 又称函数是 JavaScript 中的一等公民
- 执行环境:在宿主环境(host environment)下运行,浏览器是最常见的 JavaScript 宿主环境
- 但是在很多非浏览器环境中也使用 JavaScript ,例如 node.js
- 编程范式:基于原型、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如:函数式编程)编程风格
编程思想:
- 面向过程:所有事情都是亲力亲为,注重的是过程
- 面向对象:执行者成为指挥者,只要找对象,然后让对象做相关的事情,注重的是结果
- js不是一门面向对象的语言,是基于对象的语言,用js来模拟面向对象
- 面向对象的特性 :封装,继承,多态,(抽象性)
- 封装: 就是包装,把一些重用到内容进行包装,需要到时候,直接使用(例如把一个值,存在一个变量中,把一些重用代码放在函数中,把很多相同功能多函数放中一个对象中)
- 继承: 类于类之间的关系,js中没有类的概念,但有构造函数但概念,是可以有继承的,是基于原型.
- 多态: 同一个行为,针对不同但对象,产生类不同但效果
- 面向对象的编程思想:根据需求,抽象出相关对象,总结对象的特征和行为,把特征变成属性,行为变成方法,然后定义(js)构造函数,实例化对象,通过对象调用属性和方法,完成相应的需求
创建对象的方式
- 对象: 具体特指的某个事物,具有特征(属性)和行为(方法),可以看作是一堆无序属性的集合
- 特征--->属性
- 行为--->方法
- 创建对象三种方式:
- 字面量的方式(一次只能创建一个)
- 实例对象
var person1 = { name:"xxx", age:"xxx", eat:function(){} }; 复制代码
- 调用系统的构造函数(创建出来的对象都是Object类型的)
var person2 = new Object(); person2.name = "xxx"; person2.age = "xxx"; person2.eat = function(){}; 复制代码
- 自定义构造函数方式(优化后的工厂模式)
function Person(name,age){ this.name = name; this.age = age; this.eat = function(){}; } //创建对象--->实例化一个对象的同时对属性进行初始化 var person3 = new Person("xx",11); 复制代码
-
- 申请空间存储对象
- this就是当前实例化的对象
- 设置对象中的属性和方法(为对象添加属性和方法,为属性和方法赋值)
- 把创建后的对象返回 都是需要通过new的方式
-
- 1、2中方式创建的对象属于Object类型,3中创建的对象属于Person(创建的自定义对象)
- 字面量的方式(一次只能创建一个)
工厂模式和自定义构造函数的区别
- 工厂模式:
function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.eat = function(){}; return obj; } 复制代码
- 自定义构造函数:
function Person(name,age){ this.name = name; this.age = age; this.eat = function(){}; } //创建对象--->实例化一个对象的同时对属性进行初始化 var person3 = new Person("xx",11); 复制代码
- 区别:
- 共同点:都为函数,可创建对象,可传入参数
- 不同点:
- 工厂模式:
- 函数名为小写
- 有new,有返回值
- new之后的对象是当前的对象
- 直接调用函数就可以创建对象
- 自定义构造函数:
- 函数名是大写(首字母)
- 没有new,没有返回值
- this是当前的对象
- 通过new的方式来创建对象
- 工厂模式:
构造函数和实例对象之间的关系
- 面向对象的思想是--->抽象的过程--->实例化的过程
-
function Person(name,age){ this.name = name; this.age = age; this.eat = function(){}; } //构造函数--->实例对象 var per = new Person("xx",11); console.log(per.constructor == Person);//true console.log(per instanceof Person);//true 复制代码
- 实例对象和构造函数之间的关系:
- 实例对象是通过构造函数来创建的--创建的过程叫实例化
- 判断对象是否为该数据类型
- 通过(原型)构造器的方式 实例对象.构造器 == 构造函数名字
- 对象 instanceof 构造函数名字
原型
-
原型:
- 实例对象中有__proto__这个属性叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性--->proto--->可以叫原型对象
- 构造函数中有prototype这个属性叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性--->prototype--->可以叫原型对象 可通过原型来添加方法,解决数据共享,节省内存空间
-
实例对象的__proto__和构造函数中的prototype相同--->true,又因为实例对象是通过构造函数来创建的,构造函数中又原型对象prototype,所以实例对象的__proto__指向了构造函数的原型对象prototype
-
原型的作用之一:共享数据,节省空间
- 属性需要共享,方法也需要共享
- 不需要共享的数据写在构造函数中,需要共享的数据写在原型中
-
简单的原型语法(缺陷:需要手动修改构造器的指向)
Object.prototype = { //手动修改构造器指向 constructor:Student, attribute:"xxx", method: function(){}; }; 复制代码
-
原型中的方法是可以互相访问的
function Object(name,age){ this.name = name; this.age = age; } Object.prototype.method1 = function(){ console("method1"); this.method2; }; Object.prototype.method2 = function(){ console("method2"); this.method1; }; var obj = new Object("xx",11); obj.method1();// method1 method2 obj.method2();// method2 method1 复制代码
-
原型的使用实例
<body> <input type="button" value="显示效果" id="btn"/> <div id="dv" style="width: 300px;height: 200px;background-color: red"></div> <script src="common.js"></script> <script> /** * 改变元素样式内容 *@param btnObj 按钮对象 *@param dvObj 盒子对象 *@param josn 改变的样式信息 */ function ChangStyle(btnObj,dvObj,json){ this.btnObj = btnObj; this.dvObj = dvObj; this.json = json; } //为ChangStyle的原型对象添加方法 ChangStyle.prototype.init = function(){ var that = this;//存储ChangStyle实例对象 this.btnObj.onclick = function(){ for(var key in that.json){ that.dvObj.style[key] = that.json[key]; } }; }; //实例对象 var json = {"width" : "500px", "height" : "800px", "background" : "blue", "opacity": "0.2"}; var btn = document.getElementById("btn"); var dv = document.getElementByID("dv"); var cs = new ChangStyle(btn,dv,json); cs.init(); //调用方法 </script> </body> </html> 复制代码
-
构造函数和实例对象和原型对象之间的关系
- 构造函数:可以实例化对象,有一个属性叫做prototype,是构造函数的原型对象.原型对象prototype中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数。
- 实例对象:
- 实例对象的原型对象(proto)指向的是该构造函数的原型对象。构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
- 实例对象使用的属性或方法,先在实例中查找若有是则使用,若无再到实例对象的__proto__指向的原型对象prototype中寻找,若有则使用,若无则报错
-
为系统的对象的原型中添加方法
- 例如倒序输出字符串方法
-
String.prototype.myReverse=function () { for(var i=this.length-1;i>=0;i--){ console.log(this[i]); } }; var str="abcdefg"; str.myReverse();//g f e d c b a (隔行输出的) 复制代码
-
局部变量变成全局变量(把局部变量给window)
//函数的自调用--自调用函数 function(){ var num = 10;//局部变量 };)(); console.log(num); //报错 //win形参 window实参 (function(win){ var num = 10; win.num = num; })(window); console(num);//10 复制代码
- js是一门动态类型的语言,对象没有属性 点.出来就有了
------------------------------------------------------记录于 2019.4.20 JavaScript高级(一)