十六章: 预解析和对象

一、预解析

JavaScript代码是由浏览器总的解析器来执行的,JavaScript解析器在运行JavaScript代码的时候分为两部:预解析代码执行

1.1预解析

js引擎会把js里面所有的var还有function提升到当前作用域的最前面

预解析分为变量预解析(变量提升)和函数预解析(函数提升)

1.1.1变量提升

就是把所有的变量声明提升到当前作用域最前面,不提升赋值操作

console.log(num);//undefined
var num = 10;

实际的执行顺序是:

​var num;
console.log(num);//undefined
num = 10;

1.1.2函数提升

就是把所有的函数声明提升到 当前作用域的最前面,不调用函数

fun();//11
function fun()
{
    console.log(11);
}

 实际的执行顺序是:

​function fun()
{
    console.log(11);
}
fun();//11

1.2代码执行

按照代码书写的顺序从上往下执行

二、对象

2.1什么是对象

对象是一个具体的事物

例如:苹果不是对象,一个苹果是对象,猴子不是对象,孙悟空是对象

对象是由属性方法构成的

  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在东西中用方法来表示(常用动词)

2.2为什么需要对象

保存一个值可以用变量,保存多个值可以用数组,如果要保存一个人的完整信息呢?

用对象后:

var lele = {
    lele.name = 'le',
    lele.sex = '女',
    lele.age = 18,
    lele.height = 167,
}

2.3创建对象的三种方式

  • 利用字面量创建对象
  • 利用new Object创建对象
  • 利用构造函数创建对象

2.3.1利用字面量创建对象

对象字面量:口水花括号{}里面包含了表达这个具体事物(对象)的属性和方法

var lele = {
    name:'le',
    sex:'女',
    age:18,
    height:167,
    sayHi: function()
    {
        console.log('hi~');
    }
}

里面的属性或者方法,我们采用键值对的形式   键 属性名:值 属性值

多个属性或者方法中间用逗号隔开的

方法冒号后面跟得上一个匿名函数

使用对象:

1.调用对象的属性:我们采取 对象名.属性名 我们理解为的

console.log(lele.name);

2.调用属性还有一种方法 对象名['属性名']

console.log(lele['age']);

3.调用对象的方法 对象名.方法名()  千万别忘记加小括号

lele.sayHi();

案例:按照要求写出对象

var keke = {
 name: 'keke',
 type: '阿拉斯加',
 age: 5,
 color: '棕红色',
 wang: function () {
    console.log('bark');
 },
 showFilm: function () {
    console.log('showFilm');
 }
}

2.3.2利用new Object创建对象 

var obj = new Object();//创建一个空的对象
//王里面加内容
obj.name = '张三';
obj.age = 18;
obj.sayHi = function()
{
    console.log('hi");
)

我们是利用等号赋值的方法添加对象的属性和方法

每个属性和方法之间用分号结束

调用属性和方法:

console.log(obj.name);
console.log(obj.age);
obj.sayHi();

案例:按照要求写出对象

var obj = new Object;
obj.name = '鸣人';
obj.sex = '男';
obj.age = 19;
obj.skill = function () {
   console.log('影分身术');
}
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
obj.skill();

2.3.3利用构造函数创建对象

因为我们一次创建一个对象,里面有很多的属性和方法是大量相同的,我们智能复制

因此我们可以利用函数的方法,重复这些相同的代码,我们就把这个函数称作构造函数

构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

语法格式:

function 构造函数名()
{
    this.属性 = 值;
    this.方法 = function()
    {
    }
}
new 构造函数名();//调用构造函数

构造函数名字首字母要大写

构造函数不需要return就可以返回结果

我们调用函数必须使用new 

我们的属性方法前面必须加this

案例:创建四大天王对象

function FourKing(name, age, sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
   this.sing = function (sing)
   {
      console.log(sing);
   }
}
var ldh = new FourKing('刘德华', 18, '男');
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');

案例:王者荣耀

function Wangzhe(uname, power, blood) {
   this.name = uname;
   this.po = power;
   this.bl = blood;
   this.attatch = function (resist) {
       console.log(resist);
   }
}
var wz = new Wangzhe('廉颇', '力量型', 500);
console.log(wz.name);
console.log(wz.po)
console.log(wz.bl)
wz.attatch('近战');
var hy = new Wangzhe('后裔', '射手型', 300);
console.log(hy.name);
console.log(hy.po);
console.log(hy.bl);
wz.attatch('远战');

2.4new关键字执行过程

2.4.1new构造函数可以在内存中创建了一个空对象

2.4.2this就会指向刚才创建的空对象

2.4.3执行构造函数里面的代码,给这个新对象添加属性和方法

2.4.4返回这个新对象(所以构造函数里面不需要return) 

2.5遍历对象

格式:

for (变量 in 对象)
{
}

拿上面王者荣耀案例来看:

for (var k in Wangzhe)
{
    console.log(k);//k  输出  变量,得到的是属性名
    console.log(Wangzhe[k]);//Wangzhe[k] 输出属性值
}

 

 

你可能感兴趣的:(javascript,前端,开发语言,学习,ecmascript)