JavaScript基础课堂案例?

发布网友 发布时间：2024-10-01 06:24

我来回答

共1个回答

热心网友 时间：2024-11-16 19:03

childNodes获取的节点包括文本节点和元素节点，body中没有任何内容，但是实际存在一个空的文本节点，所以document.body.childNodes.length就是1很正常，要获取只有元素子节点，请用children属性

其实简单来说，原型就是一个对象对另一个对象的引用。

然后其是怎么联系起来的呢，是通过prototype。对就是这个，给你一个例子

var?obj?=?{

a:?2

}

var?myObj?=?Object.create(obj);

console.log(myObj.a);?//?2

console.log(myObj?===?obj);??//?false

console.log(Object.getPrototypeOf(myObj)?===?obj);??//?true

Object.getPrototypeOf(myObj).a?=?4

console.log(obj.a);??//?4

通过上面的例子，你可以看到，myObj的原型就是obj！然后obj的原型是哪个呢，是Object.prototype。实际上通过上面，你就能知道，原型原理上是对于另一个对象的引用，通过引用吧几个对象给串联起来调用。

那么你的第二个问题马上又来了，可能也是你关心的问题，类和原型的关系是啥呢？

实际上，类在实例化的时候，也就是通过new来创建一个对象的时候，是分为以下几步的：

创建一个全新的对象

这个新对象会被执行prototype连接

新对象绑定到函数调用的this

如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

这个就是new实例化的时候，所做的一些步骤，那么你其中有几个需要注意的点：

如果有return并且返回的是一个对象的话，则直接返回return后的那个对象。

反之，则新建一个对象。

并且吧函数的prototype引用到新建对象的prototype中。

这个怎么理解呢？再给你一个例子，可能例子更直观一些：

var?protoObj?=?{

b:?10

}

function?Foo()?{}

Foo.prototype?=?protoObj;

var?a?=?new?Foo();

console.log(Object.getPrototypeOf(a)?===?Foo.prototype);??//?true

console.log(Object.getPrototypeOf(a)?===?protoObj);?//?true

console.log(a.b);?//?10

通过这个例子，你可以看出来，实际上类实例化的过程，其中有一项，就是把其构造好的对象的prototype和类的prototype做关联。因为做好了引用关联，所以构造好的对象可以使用原类里面的原型方法。

这个也讲完了，那么你可能会对class比较感兴趣，想知道class是怎么做的，实际上，class更多，我理解上就是上面类似于Foo()类的一种语法糖，当然也不仅仅是语法糖，但是大体原理是没啥区别的，所以，上面所说的，对于class也同样适用

好啦，如果你对原型和类实例化有更多想了解的，可以给你两篇文章，参考一下：

Javascript基础之-原型（prototype）

Javascript基础之-this

!DOCTYPE?html

html

head

meta?charset="UTF-8"

title动态创建HTML实践/title

style?type="text/css"

.container{

width:800px;

margin:20px?auto;

}

.all{

width:300px;

height:?450px;

border:1px?solid?blue;

float:left;

}

.selected{

width:?300px;

height:?450px;

border:1px?solid?green;

float:left;

margin-left:20px;

}

.input{

margin:10px;

font-size:?1.2em;

}

h1{

border-bottom:2px?solid?black;

}

ul{

padding:2px;

}

ul?li{

list-style:?none;

margin-top:4px;

margin-left:2px;

border:1px?solid?brown;

background-color:?beige;

font-size:2em;

cursor:?pointer;

}

/style

script

var?map={},reg=/^\s+|\s+$/g;

onload=function(){

var?lis=allFruits.getElementsByTagName("li");

for(var?i=0;ilis.length;i++){

var?li=lis[i];

li.onclick=function(){

if(this.parentElement!=selectedFruits){

selectedFruits.appendChild(this);

}else{

allFruits.appendChild(this);

}

}

map[li.innerHTML.replace(reg,"")]=1;

}

btnInput.onclick=function(){

var?vv=fruitInput.value.replace(reg,"");

if(null==map[vv]){

var?li=document.createElement("li");

li.onclick=function(){

if(this.parentElement!=selectedFruits){

selectedFruits.appendChild(this);

}else{

allFruits.appendChild(this);

}

}

li.innerHTML=vv;

allFruits.appendChild(li);

map[vv]=1;

}else{

alert("“"?+?vv?+?"”"?+?"已经存在?!");

}

}

}

/script

/head

body

div

div

label?for="fruitInput"?输入新的水果：/label

input?id="fruitInput"?type="text"?/

input?id="btnInput"?type="button"?value="确认输入"/

/div

div

h1所有水果/h1

ul?id="allFruits"

li苹果/li

li香蕉/li

li橘子/li

li葡萄/li

li柚子/li

li西瓜/li

li哈密瓜/li

/ul

/div

div

h1我喜欢的水果/h1

ul?id="selectedFruits"/ul

/div

/div

/body

/html

如何正确学习JavaScript

JavaScript作为网站前端的核心知识是非常重要的，但是如何学习JavaScript是很多初学者面对的一个难题，下面我说一下个人对于如何学习JavaScript的一点心得，希望能帮到大家。

1、首先学习基础，尤其是JavaScript与其他语言不同的基础知识。

学习每个编程语言可能都要从基础的变量函数结构等学起，JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方，这些东西是尤其需要我们注意的，比如说自调函数、比如说变量值为空不是null而是undefined的等，这些东西都是和主流的编程的语言如c++、java等是有区别的，所以想要学好JavaScript，这些基础的知识一定要把握好学习好才行。

2、关于学习JavaScript的进阶

JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西，这些东西都是深入学习JavaScript的难点，简单的说一下JavaScript是基于对象的浏览器脚本语言，但是为了使JavaScript也能够支持面向对象编程，人们就使用了很多的方法来模拟面向对象的的特点，这些就变成了JavaScript的一些难点，比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等，这些东西都是和其他支持面向对象的语言是不同的，所以就导致了一些难点。关于进阶学习JavaScript，还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文，这些东西都是JavaScript比较深入的知识、

最后说明，JavaScript作为前端的核心语言绝对没有没有想象的那么简单，要想学好JavaScript除了以上提到的知识和注意点，还需要的就是多动手和实践，我们都知道网页上的所有特效都是借助JavaScript来实现，那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效，当然学习使用jQuery等JavaScript类库进行开发也十分的重要，但是这绝对不能是取代我们学习JavaScript的方法。